Create a Responsive Website Using HTML5 and CSS3 – Video Tutorial

A few weeks ago, we released two different introductory articles about HTML5 and CSS3, and I promised you we’d do some cool stuff together in the upcoming months. Well, I have been working hard on this video tutorial and I really hope you enjoy it.

In this tutorial I will teach you how to create a responsive website using HTML5/CSS3 from scratch. So rather than talking about, let’s get straight to it. I hope you will leave me feedback in as I would like to read some of your opinions very, very much!

In case you are thinking of building a website (for true), here’s a special 20% exclusive discount from Bluehost – applies to all packages! We recommend them!

Create a Responsive Website – Video Tutorial

Christian Vasile

Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Sid says

    Hi, I am a HTML5 Newbie and found your video tutorial very informative.

    But just wondering why to use different classes (topContent and bottomContent) for articles and three different classes for sidebar widgets?

    The articles in mainContent and widgets in Sidebar have the same styles, so why we are not using a single class.

  2. says

    Hi Christian,

    I’ve watched your tutorial really hoping to get a glimpse at how others deal with really responsive designs – what media queries you use, what js libraries should be used to handle the switch from landscape to portrait, how to accomodate a design to a high-resolution display, etc. Imagine my surprise when I watched an entire hour of someone coding what would like a first attempt at writing a good CSS stylesheet.

    Leaving elements not perfectly aligned, telling your viewers that “sometimes the overflow: hidden property just works, sometimes it doesn’t ” is something I personally can’t conceive. While I do honestly appreciate the effort you’ve put into creating this video tutorial I was utterly disappointed to watch an entire hour of what was advertised as being “responsive” only to find out you’re actually referring to a fluid design (using percentages) as being a responsive. Get your facts straight, please.

    P.S: I’m also a romanian and I quite honestly didn’t appreciate the clumsiness with which you’ve dealt with this particular tutorial. Maybe I’m judging it very harsh but it’s not acceptable to publish something you don’t fully understand.

    Christian.

  3. Isuru says

    Christian, This was a very helpful tutorial. Perfect and very easy to follow. Thank you and Really appreciate your work

    Isuru Wakkumbura – Sri lanka

  4. Suman says

    Hey Cristian,

    Awesome easy to follow tutorial….! Thanks a lot…It’s very useful…

  5. Tushar says

    Hi Christian,
    Your tutorial is one of the best I have ever seen. You have tried to show every little detail and explained it.
    I would like to rate your tutorial as 4.9/5 . It was very informative and knowledgeable for me.
    0.1 marks I have deducted, so that you keep posting such a good videos.

    God Bless. Good stuff.

    Regards,
    Tushar

  6. says

    Wow! Thank you so much for this wonderful video tutorial! I learned a whole lot and it was very easy to follow along with you.

    The only thing I can think of is that like you mentioned, you do tend to code very fast, and I had to pause now and then to catch up. But other than that, it was perfect!

    I’m not nearly as intimidated by html5 and css3 now that I created the responsive site by following along side your steps.

    Thank you again!
    -Michelle

  7. Ross says

    Great tutorial! Has really helped me look at designing in a new way!

    However, I did have one problem with the nav section, in that I cannot get my li items to separate from one another, they are all just crowded together. Any help would be appreciated :)

  8. Jofra says

    Hi Christian, thanks for the tutorial it really helped me a lot, i’m having some trouble after reducing the size of the browser, when I go back to full size the nav bar ul elements stay in vertical position, any idea what this could be?

    thanks In advance

    Very good tut! thanks!

  9. Abbas Ali Butt says

    Thank you very much for really good and easy to understand article.

  10. says

    Thanks so much for the quick and clear tutorial. This is exactly what I needed to get started with Responsive design. No bells and whistles, just the basics – presented in an easy to follow demo. Kudos! And thanks again!

  11. Abbas says

    Hello,

    Christian thanks for this great tutorial. You guided me so well in this thing. Thanks again

  12. says

    Great tutorial. Best I’ve seen on the web, simple and very well explained. Will definitely be visiting this site again! Thank you :)

  13. says

    Thank you Christian for making such an easy to understand tutorial, Ive looked at other tuts and they seamed to make responsive sites so complicated. Chhers Phill

  14. George says

    Tried following this video but for some reason I cannot get the nav bar to do anything. I even copied and pasted both the index and css files into my editor and still could not get the links to line up sideways or be boxed.

    I am using intype for the editor. I don’t know if that was what is causing this problem or not.

  15. says

    Hi Christian,
    Thank you very much for recording this tutorial. I have been intimidated by responsive design and I have put it off for a long time, however, your tutorial has made it very accessible and was a great help to me.

    Kind regards,
    Paolo

  16. Tina says

    Great tutorial. I am trying to create a contact us form with text area. The text area is not changing though. Now sure what I should do. Please help.

  17. Sharad says

    Very nice tutorial and nice explanation. very easy to understand. It helped great for me to learn responsive design.

  18. says

    Hi christian
    Thanks for giving us such a good tutorial can you plz send me the code of this tutorial as the html is not too visible in video and i skip many things becoz of that

  19. Sammy says

    Just a quick question after an amazing tutorial. One of the easiest to follow on the layout of CSS by the way. I do know one can use id’s as well. I think the tutorial made it easier to understand for beginners and those of us who haven’t used CSS much. That being said, when making the first class=”active”, the hard code keeps it from changing even when something else is clicked. Is this by design or just example of how it works? Is there a way to not have one active until hover? Just new to this and wanting to know. Since “active” was styled, I was wondering if problems would arise without it, or if it has to be there.

    Any help (other than the massive amount I gained today…) would be greatly appreciated. Thanks again!

  20. says

    hi..
    i included two pics to the webpage by using the following html code..

    and i placed it next to each other by using the following css code….
    .img1{width:50%;hight:auto;display:inline-block;position:relative;}.img2{width:50%;hight:auto;display:inline-block;position:relative;}
    Now when I re-size the window the pic’s are also re-sized…
    i have no problem with that.. but now I want “pic1″ to stay the same size and i need pic2 to shrink… can i do that….???? i understood the above code properly and i couldn’t find any solution for my problem… Help Me Out…

  21. Waitong says

    Thanks a lot! A really good tutorial:)

    Do you now when the tutorial on making a contact-form is ready?

  22. MagnMagnus says

    Nice tutorial, Christian:) Thanks a lot!

    I am also confused about the “new” content-tag? Is it hmtl5?

  23. Bertz says

    Now I finally understand what is a responsive website.

    thanks a lot, Christian :D

  24. John says

    Hello Christian,

    This tutorial is fantastic! I recently built my first HTML5 site and I missed a few key points. This helped me figure out what they were. I fixed my site and now it looks great! Your instruction is right on. Kudos to you.

    Many thanks,

    John

  25. Pottymus says

    I just wanted to say a big thank you for taking the time out of your life here to do this. It was awesome and I learnt heaps – I still cant get over just how easy responsive design seems and my mind is already whirring with the countless things I can do with what you’ve shown me here. Man I would LOVE to see you personally do a tutorial on parallax sliding – that would be 6 shades of awesome.

  26. Aaron says

    First of all I loved this tutorial, thank you very much.

    I was playing around and I tried to add another gif in the main header. I want continuos imagry acroos the top. but if the dimensions of logo 2 were greater than logo then the height of logo 2 were some how lessoned. Any ideas why this is happening?

    body class=”body”
    header class=”mainHeader”
    img src=”img/logo.gif” (size 640*360)
    img src=”img/logo2.gif” (size 700*360)
    nav ul
    li a href=”#” About Us /li
    li a href=”#” Watches/li
    li a href=”#” Jewelry /a /li
    li a href=”#” Services /a /li
    /ul/nav
    /header

    Cheers,
    Aaron

  27. says

    Great Video! I am having problem with the css code, do you have the source file so I can compare where did I do wrong?

  28. Shery-Ann says

    Hi Christian,
    Great tutorial! I like how you explained both the HTML and CSS, it was very easy to follow and I now understand a few of the CSS elements that was a bit effy for me.

    Keep the tutorials coming!

  29. Angela says

    Thank you for the great video tutorial, Christian! I thought the tutorial was clear and organized and your voice volume level was perfect. I enjoyed your moderately fast pacing.

    I have 2 questions:

    1) Would it have been better to enclose the top, middle and bottom sidebars into a containing div to better manage their floating layouts? I found that when I put more paragraph content in the sidebars, the layout broke: the Bottom Sidebar div got pushed below the Content div.

    2) In the mobile version of the main nav, how necessary are the floats? Seems you could just remove the “float: left” and stack the ‘s.

    Thanks again for the great tutorial!

    • Christian says

      Hi Angela.

      To answer your first question, yes, it would be okay to enclose everything in a div of its own. I do not know if it would be better of worse, I probably do it myself more often than not, but I have never encountered issues with it.

      I would still keep the floats in the code for mobile because you never know how different mobile browsers interpret it. It works fine on iPhone, because it works with Safari, but who knows how other random browser works? I would keep it just as a safety net.

  30. Tom Ireland says

    Hi, Christian. Your video was really informative and outlines just how quickly a responsive design can be put together.

    There’s a couple of things I was looking for that I’ve learnt previously around responsive text and width calculation. The old target / context = result is great for achieving your pixel perfect layouts using percentages. Would be good to see this covered for newbies.

    I’ve just started using my own simple grid system (rather than a framework), which can be written very easily to create responsive layouts, with the potential to easily change the layout later on or reuse it. Might be something worth introducing in another tutorial for those looking at responsive grids but not wanting to have to learn one that’s already written.

  31. says

    Thanks for this helpful tutorial.
    Responsive web design is becoming the new standard of the web.
    My future clients’ websites will all be responsive from now on.
    Keep up with the good job !!!

  32. Ravi Karthick S says

    This is really very nice, i tried to learn HTML5 for past 4 months.But i couldn’t get that much..to create responsive website!!..Sure i do myself responsive site here onwards!!
    Thank very much once again!!..
    Possible POST PSD TO HTML5!!

  33. says

    Thanks a lot for this video! Great tut.

    This helped me to refresh my html skills to a new level of html5.

    Thanks a lot!!

  34. Linda Sloan says

    Excellent tutorial and sooo easy! Thank you Christian! Also, love your accent!

    Just one comment I was typing and to watching at one point and you used the term pixel instead of percent. So I had to go back and correct.

    • Christian says

      Hi! Thanks for the comment. I might have done that at some point in time, as I am not really used to speaking about what I do when coding, so it was a bit difficult for me too. But if you follow the video as well, like you did, it shouldn’t create any confusion.

  35. Chris says

    Nice tutorial im in the process of getting my head around this stuff. In a year or so responsive design will be a given with hardly any up sell needed.

  36. Tim says

    Hey Christian,
    Great tutorial! I found it easy to follow and I learned a lot as I have never built a responsive page before. Look forward to the next tutorial.
    Tutorial request for the future – adding a drop down menu using CSS :)
    Thanks!!!
    Tim

    • Christian says

      Hi Tim. I already created the tutorial and uploaded it on our YouTube page, so it will come very soon here on 1WD as well.

      • Priiyanka says

        Hey Christian,

        This was really really wonderfull experience to watch your this video for responsive coding. I am deeply thankful to you for providing such a knowledgeable video tutorial. For the first time in life till date, this is the only video I have actually felt very very helpful better than any other help from anywhere in the world. Hats of to you boss! … you have made the victory! … Loads n loads of thanks! and god bless you!

        Kindest Regards,
        Priiyanka

  37. Vishal says

    Hi Christian Vasile,

    I like your tutorial very much, Can you give me a answer how to re-size background image in the responsive html or css? because some times i use background image for content or other things.

    Waiting for your reply.
    Thanks!!
    Vishal

  38. Pratik says

    Awesome easy to follow tutorial….!
    There was one question regarding the “active” class you created to keep current link highlighted in navigation bar. You simply added active class to home link. what happens when we click other links ? For doing it, I have used simple javascript in past to keep track of current link and highlight corresponding link. Do you have any other suggestions on how to do it ?

    • Christian says

      Well the fact that this is only an HTML, static page means that you can actually attach the “active” class to each page in its own document. You can use different scripts to find out which is the current page, but this was from the beginning supposed to be a static, simple page, so I didn’t get much into that.

  39. says

    Hello again Christian,

    I finished your tutorial today and I’ve been having fun going back through it and taking it what I’ve learned when I started. With regard to building the HTML5 content I noticed we’ve both used in the tutorial a separate content element. Now, the purpose of having this is quite clear to all of us I’m sure, but I can’t find any evidence of this element in the HTML5 specification or any explanation of it online. So I’m a little confused, is it actually approved in the HTML5 draft or yet to be adopted.

    Also I’m intrigued; Is it still good practice to use div from time to time now that we have , Header, Article, footer, nav, Aside and so on!

    Many thanks :)

    • Ij888 says

      I’m also intrigued as Jon; Is it still good practice to use div from time to time now that we have , Header, Article, footer, nav, Aside…

      plenty thanks :)

  40. says

    I’m just starting to have interest about responsive websites and fortunately I’m a subscriber of 1stwebdesigner. I’m very thankful to all of you from 1stwebdesigner for making it easy for me looking for tutorials like this. The video is easy to follow and my confidence is up, going for this kind of web work as a freelancer. Kudos!

  41. Larry says

    Very easy tutorial. Thanks for this. Waiting for the next one on responsive contact form. Thanks, Larry.

  42. says

    Amazing tutorial Christian! So succinct and well done. I am very excited to have learned responsive coding in one hour. Thanks so much.

  43. Narey says

    Chris, a well done tut. Congrats about that. As well, so many things i wanted to say was already mentioned by our fellow readers regarding your style in which css file is written.

    I have another question. You have used a lot of math (may be few) for aligning the content and text to be fluidic. This is done since the target wireframe is well known.

    Lets assume for a moment, the target resposnsive page is user driven and each user carries privileges in viewing different links. In such scenarios, holding a fixed height will look really awkward for a user who is privileged to use only one link.

    Since we are all talking about more responsive behaviour, is there a way we can make dynamic things fall in line to be fluidic too? Coz, teh web today is more dynamic.

    Thanks again for a really good tut. Appreciate your commitment in promoting learning.

    I gotta say this, You guys are doing a great job!!

    And hey, Coda 2…Never heard about this and looks pretty cool. I’m gonna get this on my OS X!!

    • Christian says

      Hi Narey

      When coding responsive layouts, you basically only use percents, so that everything falls nicely into place. I have used some pixels here and there for the sake of the design, but I mainly use percents too.

      When I get a client who wants a responsive website, I usually make it with several media queries, so that it fits most popular screen sizes. Most of the time it all falls into place :)

  44. Barry says

    Hi Christian,

    Thanks for this very usefull tutorial. You’ve made me feel Confident to build IT from scratch instead of trying to copying IT from somewhere of the net and then strugling to get IT how i want.

    Thanks!!!

    Barry

  45. Jaqueline Mariano says

    That was awesome man! Very very easy to follow this tutorial! You are a very great teacher!
    I loved the tutorial!
    Keep going!

  46. Paweł Grzybek says

    Awkward CSS order. Good tutorial for very begginers with CSS, but your responsive skills are poor unfortunately. Terrible typography habits :(

  47. Dumitru says

    Impressive and well done !! Simple and clear (bravo, mi-a placut). If you’re planning to set up a web page, HTML5 and CSS3 is probably all you need. This is the latest technique for Responsive, Fluid and Flexible web design.

  48. Awais Raza says

    Hi, Actually you know there are lot of readers of 1stwebdesigner from Pakistan. Youtube is banned in Pakistan for some reason since a long time. Can you please upload further videos to youtube, as well as another alternative site like dailymotion? Thanks

  49. says

    I thought your video was very informative and helpful. I have been avoiding HTML5 and CSS3, but have recently started to incorporate it some. I really like some of the new features and simplified code. Responsive web design is another area I have wanted to learn more about. I think the main reason I have avoided responsive design is my graphic design background. I am accustomed to content staying put on paper. Web is so very different than paper and using pixels seems to give more control over exactly how a page will display. I appreciate the tutorial and the straightforward presentation approach. Just wondering, do you ever use a “Reset CSS” with responsive design?

    • Christian says

      Hi John

      Yes I sometimes use Reset CSS, but it was not the case here as I believe there was already a lot of information to take in. SO I just preferred to keep it simple.

  50. Sue says

    Just finished watching your great video and have been coding along at the same time. I’ve learnt a great deal and look forward to the next installment!

  51. Max Emanuel Vasiu says

    Thank you for this very helpful tutorial.
    I was looking for “something” (which I now have found)
    to help me make my homepage, responsible and easy to code.
    Self-coding gets a lot easier when you have such a good tutorial to watch and learn.

  52. stu morris says

    I am just starting out in web design and have been, watching loads of tuts and reading loads of articles. I must have registered at 1stwebdesigner some time ago as I have been recieving emails for a while now, however until tonight I have never had the time to watch one of your videos or read your material. If I’m honest I have spent hours and hundreads of euros looking at the wrong things. I should have been here at 1stwebdesigner. I have just watched Christians video on responsive web design and it is perfect. The speed at which he presents is spot on, clear intstruction no filler material trying to make the video longer than needed. I have been struggling with my decision recently wondering if i’ll ever learn enough in the time I have, but now after that video and the subsequent look through the site, I feel that I’ll be well on my way very some. By the end of the week i’ll have coded my very own resonsive customized website and will be well on the way to complete several more for my portfolio. Thanks to Christian and I have no doubt the other guys at 1stwebdesigner.

  53. Mihovil says

    Good tutorial! I’ve really enjoyed going through this tutorial even though I’m experienced with web development. :)

  54. says

    This tutorial looks great, easy to follow … but I really don’t like the way he writes CSS. He made it so hard for browser to render the CSS. And also he used CSS classes the way how IDs works …

    For example, since in the .mainHeader there is only a in li you could simply use .mainHeader a or use classes for the li so you could use something like .navLink > a which is easier for the browser to render it.

    .mainHeader nav ul li a is one of the most (sorry for that) stupid way how to write CSS …

    Also you should check what is CSS specificity, how classes and IDs works and at last how browser render the CSS.

    Otherwise, this tut looks really simple ;)

    • Christian says

      Hi Marek

      Thank you for your reply and feedback. I will most definitely look into that. We learn something new every day and I never thought my coding is 100% perfect. But as you can see here, it helps a lot of people :)

  55. says

    I have learned a lot already 35 minutes into this video and I look forward to viewing the rest. Thank you so much for doing this tutorial. I’m looking into learning as much as I can about HTML5 and this refreshes me on much and opens my mind to new ideas.

    Thanks again!
    Jonathan (Jonnie Grieve Digital Media)

  56. Dueep J.Singh says

    I was very excited with the idea of starting from scratch. But you begin with duplicate theme! How do I do it, if you did not tell the links where I could atleast duplicate the wireframe on which I would work from scratch!
    Please get back to us trainees with an explanation of what you said in the initial minutes.
    Duplicate What files? From Where? certainly not from the video, and this page does not have any download wireframe link.
    Or did you want us to start coding from the very beginning coding on our own for practice, so that we know what we are doing. If so, ooops, sorry for being so preremptory!

    • Christian says

      Hi! Thanks for the comment.

      It might be a bit confusing, but the fact that I duplicated the theme means nothing. It was just like creating a blank HTML document, I duplicated only because it was easier than actually creating the HTML and CSS documents again. So duplicating and just deleting the content was much quicker for me :)

  57. says

    Hey Christian!
    Good vid… Even though I have some years of experience developing HTML/PHP with CSS, I found it useful in terms of the way of using the HTML5 tags for the sake of SEO.

    Keep on the good work mate!

  58. Mary says

    Great Tutorial and the design of the responsive website using HTML5/CSS3 from scratch was well simplified. Thanks