Learn how to make a website responsive in this quick CSS and HTML5 tutorial. Both video and text versions are available.

  • Tutorial Level: Beginner
  • Skills Required: Basic knowledge in HTML5 and CSS
  • Completion Time: Approximately 15 minutes
  • Warning: This responsive HTML and CSS tutorial is targeted towards beginners, but it can also be for designers and developers who want to have fun!

How To Make A Website Responsive (Text Version) – Preparation

We promised that it will only take about 15 minutes to build a responsive website, and we will hold true to our word. We’ll start by creating a simple single-page website.

What is Responsive Web Design?

If you are fairly new to the term, then we have the perfect reading materials for you!

Our Goal

This is our goal.

By the end of this responsive CSS tutorial you will end up with something similar to the page above. It is a very plain design, but it will do the trick for now. It is fairly easy to clone the image as seen above, but the main goal here is to make it responsive. To make the website respond based on the size of your device’s screen size.

Try opening the demo on your smartphone and you will see this:

This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.

You will find all the files, including the images, in the download link below.

Before moving on, download the Foundation Web Framework and unzip it to a folder where all of your files for this tutorial will be located. It should look like this:

Open index.html and see several elements blasted in one page as a demo. We won’t use everything you will see in it, but you can learn a lot from it. Now, delete it or move it somewhere else so that we can start from scratch.

Our goal is to create a website which has the basic areas of a website: header, body, sidebar, and footer. Of course, everything will be responsive, from images down to text and elements placement.

Step 1: Understanding the Foundation

Okay, it is already given that we will use the structure above, but how will we translate that to HTML? Easy!

First, you need to understand a few things about Foundation and how creating layouts works. It uses 12 columns to define the width of each “section”, which is derived from foundation.css‘ width of 1000px. So, if we write:

<div class="row">
<div class="twelve columns"></div>
</div>

The above code would mean that in this certain row, you will occupy twelve columns with the width of 1000px. While on the code below:

<div class="row">
<div class="twelve columns">
<div class="six columns"></div>
<div class="six columns"></div>
</div>
</div>

We placed two “six columns” inside of “twelve columns”, this would mean that “six columns” will occupy 50% of the width of “twelve columns”. The same is true for other number of columns:

<div class="row">
<div class="twelve columns">
<div class="row">
<div class="seven columns">
<div class="row">
<div class="twelve columns"></div>
</div>
</div>
<div class="five columns"></div>
</div>
</div>

For “seven columns” we placed another row inside which occupies “twelve columns”. This means that the “twelve columns” will take the maximum width of “seven columns” and divide it into “twelve columns”. It’s a nest of rows and columns, which is important for our goal layout. Now that rows and columns, and nested columns, have been explained, let’s move on to the main show.

Step 2: Laying Out the Foundation

Using your favorite text editor, create a file named index.html then add the following at the very beginning of the file:

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <!--<![endif]-->
<!-- Set the viewport width to device width for mobile -->

Welcome to Foundation

<!-- Included CSS Files -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="stylesheets/ie.css">
<![endif]--><script type="text/javascript" src="javascripts/modernizr.foundation.js"></script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

The above code is where we deal with the evil of Internet Explorer. It is also where we call on to different stylesheets which are necessary to make the whole thing responsive and run on mobile devices. It comes with Foundation. Then type the following code:

<div class="row">
<div class="twelve columns">
<h2>Header Twelve Columns</h2>
</div>
</div>
<div class="row">
<div class="twelve columns">
<div class="row">
<div class="seven columns">
<h2>Body Seven Columns</h2>
</div>
<div class="five columns">
<h2>Sidebar Five Columns</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="twelve columns">
<h2>Footer Twelve Columns</h2>
</div>
</div>

We have already explained what these “rows” and “twelve columns” are above.

Tip: if it’s not clear to you why we should wrap the sidebar and body with “twelve columns” you can try removing it and see what happens!

By now it should look like this.

We haven’t added stylings yet, but you can already see how it jives with our goal. I’m not much of a designer but we will do our best to make this look amazing.

Wait, wait, wait! What’s that navigation bar, you ask? As we have mentioned earlier, this is one of the beauties of Foundation. It has extensive documentation that will teach you how to properly use forms, navigation, buttons, grids, CSS, and other elements covered by Foundation.

Everything is basically done now, all we need to do is add some images and paragraphs and design the whole thing. If you followed this tutorial, then by now you have already created your first responsive web page!

Step 3: Adding Content To Web Design

This step is needed to actually see how the webpage will look in its full glory. Copy some Lorem Ipsum and paste it on your “body” div, then insert images using tag, then you’re on your way to becoming a superstar with this!

If you’ll go back and check the demo, you might notice that the background isn’t exactly white, but with a subtle pattern. Choose one on SubtlePatterns and see for yourself which works best.

Step 4: There is no Step 4

Well, actually there is a step 4. The next thing you need to do is study the files you downloaded and start creating your own responsive web page from scratch.

There are a lot of other tools you can use aside from Foundation, but the idea is basically the same. Don’t forget to check the documentation!

How To Make a Website Responsive Video Tutorial

Now if you were looking for a video and you’re ready to build a responsive web design with HTML5 and CSS3 – you are in the right place. Just download the source files, view the demo, and click play on the video – let’s make a responsive website!

Editorial Team

Written by Editorial Team

  • This is pretty cool…! I loved it and also want more like this. First understanding is a must thing to be done and I loved such informative pattern tutorial of responsive web design and also look some responsive web design in Auckland, NZ.

    https://ultimatewebdesigns.co.nz/website-design/

  • A better tutorial for first time starters.This tutorial helps me to make my first responsive website.Yet it appears a small amount of stuff for 15 min.Thanks for such informative information.

  • chris

    I dont understand I have added the code but you have not included the , or parts?
    am I supposed to know where to put this?

  • SantiMeremans

    VERY VERY USEFULL, thank you very mucb! :)

  • Bimen

    I wrote codes 2 times and nothing happened :(((

  • Kakkoiikun

    Kinda cool!

  • Kyle

    A responsive site is a good site.
    It is so common to see websites which are not responsive across different devices and it can be really irritating. This is a brilliant article with very in depth information on how to make your site 100x better in a short space of time!

  • Randy Downs

    Nice and thorough tutorial. Do you find Foundation easier to work with than Bootstrap?

  • Emily Johns

    Hi, The deep knowledge on media queries with the combination of Html-5 is must here, without proper knowledge or experience on ‘media queries’ its very difficult to achieve 100% responsive website also its beneficial if you have good knowledge of j-Query which can be beneficial to achieve responsive menus.

  • Leo

    I am trying hard for a really long time. It is better to go responsive from the very beginning rather than editing everything again and again.

    • James Richman

      Hey Leo, yeah I think that’s best for everything. Start out with everything thought out and less headache later

  • Responsive

    it’s no sence to avoid using responsive option on a website, because at our days it’s highly recommended to any web owner or future web owner to have this option, by the way i liked the way you mention how to turn a website responsive in less time ;) … thank you man !

  • Nilay

    Realy good tutorial . you have tried to explain every new html 5 feature and all the right additions required for a cross browser ,cross device html 5 css3 website. Thanks a lot.

  • Jennifer Alvarado

    Hey John,
    Decent information for making the websites responsive in shorter periods..
    I want to know that can we start working on this if we have very few or basic information about HTML and CSS? And if you can also help me with easy to work plugins for building creative and responsive websites?
    Regards,
    Jennifer

  • Great post! Thanks for the simple tut!!

  • Ali Qayyum

    nice tutorial, step by step detailed of responsive. i have easily created my layout now. thanks

    • James Richman

      Glad to help, Ali

  • Well I always prefer clean and responsive website…. A user friendly and responsive website make a website looks better and create good effect in ranking… Thanks for sharing this post :)

    • James Richman

      Hey Davesh. Thanks a lot :)

  • Vipul Shukla

    this was great, i didn’t knew much about html5 and css but as a beginner i found it very helpful and enjoyed learning throughout. thanks man..
    u made my interest stronger ..

  • Ivan

    The files are wrong , the net is full of bad tutorials like this if u wanna see people learning fix the files.

  • Paul Mountney

    The links in this ‘tutorial’ are not the ones that are in the source code of the test page.

  • Sarah

    GREAT tutorial :) .

  • Wow, amazing tutorials! It will take me more than 15-minutes though! Just came across your site today and I will be bookmarking it!

    • Dainis Graveris

      Heh, let me know Steve, how long it took for you :)

    • Website break scanner

      Can someone PLEASE give me the link to the actual demo? The download the guy gives looks horrid and its hard to follow compared to the demo. I had to save as the demo but i feel like its still missing some things. Please help

      • Rean John Uehara
        • Website break scanner

          Yes that is the link that I used, however it isn’t laid out properly for the tutorials sake. Its hard to explain I guess, but basically all the files are in one folder and not organized, which is my main issue. If anyone still has the old version of the demo that LOOKS like the test.html file that would be great lol. The tut is excellent. I just need the correct files so I can follow.

          • Rean John Uehara

            You can post a screenshot, you know. Are you using an old version of IE? I’ve checked it on Safari, Firefox, and Chrome on Mac and they’re all fine. Same goes for Windows browsers.

          • Website break scanner

            So this is what I was talking about. To better explain what I mean, This is the file structure of your demo, I clicked on “Download File” which should get me the Responsive.zip file.

            Opening the folders gives me the following file structure. css, img, and js folders which are organized properly:

            However I click on index.html, and it looks like this:

            As for the test.htrml that you posted recently. That site looks great! Everything looks like it should:

            However the files are just dumped in one folder:

            I know I sound nit-picky in all of this and I could just organize the files myself, but I just wanted to let you know that for those who won’t know how to organize these files, the css, js, and img, it would really help them :-)

            • Rean John Uehara

              I see what you mean now. Not to ward off pedants, but that issue doesn’t seem to impair understanding of the whole tutorial. ;)

  • Bernard

    Thank you very much for this inspiring tutorial. I’d been meaning to find out about Responsive web design and your article gave me the kick in the butt that I needed. Downloaded Foundation and was shocked at how easy the whole concept is to understand and work with. Without intending to, I rebuilt one of my large sites in a week and will probably redesign other sites using this technique. Also get to put another skill under my belt. Thanks again!

    • Dainis Graveris

      Bernard, thank you for this awesome comment! Glad to hear you moved ahead and now are moving on fully using responsive benefits? :)

  • Luiz Santos

    Nice piece of collaborative instructions and overview but you may have messed up a little on the image and what would it look like after that. But all in all, really informative. Thanks :)

  • Francis

    This article confused me when i went through it step by step.
    If you take a look at the example of how it should look like at step 2, the image is incorrect.
    During the tutorial, you never wrote anything to make the nav bar appear, therefore causing confusion.
    For your next tutorial ( or maybe a better version of this one) try to think of these things and show more steps
    in between with if possible, more screenshots. Still i’d like to thank you for introducing us to the Foundation framework.

    • Rean John Uehara

      “you never wrote anything to make the nav bar appear”

      Hi Francis, I actually answered that question because I knew that people will ask me where the Nav Bar came from. Care to take a guess where the answer is? :) Hint: if you read it without skipping, you’ll definitely find it. ;)

    • Francis

      Ooo i saw it, my bad.
      I understand it alot more right now, i looked at the omage, assuming that i couldn’t continue the rest of the tutorial. I’ll try again. Thank you for your quick reply and cool tutorial.

      • Rean John Uehara

        Yo Francis, don’t forget to sign up on our newsletter because soon we’ll be introducing more tutorials like this that you’ll surely love! :)

  • Have you tried Responsive Grid System? I like it. but I would, I built it!

  • John

    Such a substantial article. It does not only help the PRO’s, but the beginners as well. Jargons are not easily understood by any beginner but you explained it well! Thanks for the generous information!

  • Udo

    Hi Dainis,
    thanks for your post … what people very often forget about though is, that “responsive design” in the long run has to with useful content, “fulfilling needs” and therefore psychology and marketing. Wasn’t the purpose of your thread, so never mind ;-).
    Best regards from Germany
    Udo

  • John Bash

    I just finished reading this article and the comments posted here are really useful in resolving my queries related to responsive design. I like the way you explained this article and especially replies to comments are awesome. I appreciate your work Dainis and John, looking forward for more informative articles.

    • Dainis Graveris

      Oh thank you John, for kind comments! All praise goes to Rean, he’s been crazy with responsive lately :) Digging deep! Glad you enjoyed tutorial!

  • Nico

    15 minutes is very athletic … but a nice tutorial

    • Dainis Graveris

      Enjoy and please use your real name in comments!

  • Valt

    amazing tutorial, it make me more fun to play with strategy for creating my first responsive website….thanks

    • Dainis Graveris

      Glad you enjoy it, let me know how you do, and please use your real name, i changed it now, won’t approve keywords in name anyway.

  • Tanveer

    Mr. Dainis Graveris and Mr. Rean John.. can you show a tutorial for the fluid html design.. i think so this is the word… anyways i know you’ll be understand

    • Dainis Graveris

      What do you mean with fluid? Responsive is fully flexible, that’s all you need now.

  • peter

    The demo is different to the download..it doesn’t have the nice menu bar; is that why it only took 15 mins?

  • saha

    Great fun man. amazing tutorial for beginners.

    • Dainis Graveris

      Did you succeed on creating your first responsive website? :)

  • Great tutorial. First of all I want to thank you for mentioning so many great resources on Responsive Design. Secondly, you explained everything clearly. I got a query, after a little bit of research, I came to know that some are considering only 2-3 screen resolutions, while some others are creating responsive design by considering some 5-6 media screens. Can you explain which of these two is more preferable ?

    • Dainis Graveris

      Bharat, most websites are interested to get responsive to look good on mobile, tablets and big screens on computers. You can design different transitions, like even 5-6, but i feel 3 is more than enough. Check this article for inspiration – http://www.1stwebdesigner.com/inspiration/responsive-webdesign-tools-inspiration/

      I am pointing especially on inspiration section, where you can use Firefox Nightly or any other tool to change screen size, or just expand your browser screen from full to small and you’ll see how many transitions other sites have..and have a good understanding how many transitions make sense for your designs. Hope it helped, let me know, Bharat!

      • Roman

        Things becomes more complicated when you dive deeply into developing with rwd. Some devices need type size adjustments because of high ppi, so we need to use device-pixel-ratio media query or device-width as an alternative.

        And this is just a bit of all things which should be considered when developing for both desktop and mobile expirience.

        • Dainis Graveris

          Roman, of course – as it is with everything. If you want to go real deep, it will become a bit scary at first, because there are so many devices, so many solutions you need to find in order to create fully functional and responsive website, but I think this is nice place to get started if you are becoming familiar with responsive sites!

  • Luis

    Hey thanks for the neat tutorial. Personally what Framework would you recommend using?

  • Ricardo Nunes

    That’s a good tutorial for responsive site but i have to agree with Rod, in 15 min it’s difficult…
    Well done!

    • Dainis Graveris

      Hah Ricardo, did you actually gave it a try? :)

      • Ricardo Nunes

        Honestly? No, but it seems a lot of stuff for 15 min. That’s all ;)

        • Dainis Graveris

          Heh, you need to work fast to be productive :) Try it!

  • Kim Fox

    Great tutorial! I am getting ready to make my first responsive website (it being all the rage right now) and this article is very helpful!
    By the way, your writing is great :) very fun to read.

  • Tanveer

    got it ice but once thing i want to know what if we had to make a big site into mobile version like carshop.com shall we use this type of approach or we should make a separate site for mobiles.
    Thanks,
    Tanveer Singh

    • Rean John Uehara

      Hi Tanveer! It actually depends on you. But seeing that carshop.com has quite the functionality, they might as well develop a separate site for its mobile version.

      • Tanveer

        Thanks sir so i will start doing a separate site for this.. Thank you very much :)

  • Lazaac

    thanks bro! Roaaar!

  • rod

    15 min ? ok ! …