Create a Responsive Website Using HTML5 and CSS3 – Video Tutorial

Posted in Coding, HTML & CSS, Tutorials1 year ago • Written by 75 Comments

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

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

69 Written ArticlesWebsite

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.

75 Comments Best Comments First
  • Awais Raza

    Tuesday, April 9th, 2013 13:00

    11

    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

    +53
  • Sara

    Sunday, June 2nd, 2013 01:29

    58

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

    +18
  • Mary

    Monday, April 8th, 2013 10:01

    1

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

    +14
  • Gretchen

    Wednesday, April 10th, 2013 06:23

    17

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

    +9
  • Steve

    Wednesday, June 5th, 2013 11:11

    61

    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!

    +8
  • Ross

    Thursday, June 20th, 2013 07:59

    66

    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
  • Abbas Ali Butt

    Thursday, June 13th, 2013 04:15

    64

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

    +8
  • James

    Saturday, July 6th, 2013 11:11

    75

    Many thanks for a great tutorial and especially for keeping it simple.

    +8
  • Abbas

    Wednesday, June 5th, 2013 02:59

    60

    Hello,

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

    +7
  • Sid

    Wednesday, July 3rd, 2013 13:38

    74

    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.

    +7
  • Pratik

    Wednesday, April 10th, 2013 23:43

    21

    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 ?

    +6
    • Christian

      Saturday, April 13th, 2013 04:53

      34

      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.

      +8
  • jyothi

    Monday, July 1st, 2013 03:02

    73

    Very well explained. I loved it.

    +6
  • Aaron

    Monday, April 22nd, 2013 15:32

    40

    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

    +5
  • Hector Jayat

    Sunday, June 2nd, 2013 13:19

    59

    Excellent post and Website
    Congrats!

    +4
  • Linda Sloan

    Friday, April 12th, 2013 14:15

    25

    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.

    +4
    • Christian

      Saturday, April 13th, 2013 04:45

      29

      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.

      +8
  • John

    Tuesday, April 9th, 2013 11:10

    10

    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?

    +4
    • Christian

      Saturday, April 13th, 2013 04:50

      32

      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.

      +3
  • Jofra

    Wednesday, June 19th, 2013 06:33

    65

    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!

    +4
  • Pottymus

    Monday, April 29th, 2013 20:53

    42

    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.

    +3
  • Yann

    Saturday, April 13th, 2013 02:24

    28

    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 !!!

    +3
  • Chris

    Friday, April 12th, 2013 11:21

    24

    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.

    +3
  • Marek Zeman

    Monday, April 8th, 2013 12:37

    5

    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 ;)

    +3
    • Christian

      Saturday, April 13th, 2013 04:52

      33

      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 :)

      +7
  • John

    Tuesday, May 7th, 2013 21:53

    43

    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

    +3
  • Ravi Karthick S

    Friday, April 12th, 2013 16:21

    27

    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!!

    +2
  • Nn

    Wednesday, May 15th, 2013 03:49

    50

    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

    +2
  • stu morris

    Monday, April 8th, 2013 18:51

    7

    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.

    +2
  • Narey

    Wednesday, April 10th, 2013 04:50

    16

    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!!

    +2
    • Christian

      Saturday, April 13th, 2013 04:57

      35

      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 :)

      +2
  • George

    Friday, May 31st, 2013 16:09

    56

    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.

    +2
  • John

    Friday, April 12th, 2013 15:41

    26

    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!!

    +2
  • Waitong

    Sunday, May 12th, 2013 04:39

    46

    Thanks a lot! A really good tutorial:)

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

    +2
  • jennyx

    Wednesday, April 10th, 2013 09:25

    19

    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!

    +2
  • Max Emanuel Vasiu

    Tuesday, April 9th, 2013 04:53

    8

    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.

    +1
  • Dueep J.Singh

    Monday, April 8th, 2013 11:55

    3

    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!

    +1
    • Christian

      Saturday, April 13th, 2013 04:49

      31

      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 :)

      +1
  • Mihovil

    Monday, April 8th, 2013 13:23

    6

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

    +1
  • Gary

    Monday, April 8th, 2013 11:41

    2

    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!

    +1
  • Jonathan Grieve

    Monday, April 8th, 2013 12:22

    4

    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)

    +1
  • Dumitru

    Tuesday, April 9th, 2013 13:46

    12

    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.

    +1
  • Sue

    Tuesday, April 9th, 2013 09:18

    9

    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!

    +1
  • Vishal

    Thursday, April 11th, 2013 04:12

    22

    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

    +1
  • Larry

    Wednesday, April 10th, 2013 07:37

    18

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

    +1
  • Barry

    Tuesday, April 9th, 2013 16:31

    15

    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

    +1
  • Tim

    Thursday, April 11th, 2013 19:29

    23

    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

    +1
    • Christian

      Saturday, April 13th, 2013 04:46

      30

      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.

      +6
      • Priiyanka

        Wednesday, June 12th, 2013 17:16

        63

        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

        +1
  • Jonathan Grieve

    Wednesday, April 10th, 2013 12:24

    20

    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 :)

    +1
    • Ij888

      Friday, May 24th, 2013 22:19

      52

      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 :)

      0
  • Jaqueline Mariano

    Tuesday, April 9th, 2013 15:07

    14

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

    +1
  • Shery-Ann

    Tuesday, April 16th, 2013 09:33

    38

    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!

    +1
  • Sharad

    Thursday, May 23rd, 2013 05:54

    51

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

    +1
  • Tina

    Sunday, May 26th, 2013 01:52

    53

    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.

    +1
  • Dielen

    Thursday, May 30th, 2013 07:25

    55

    Hey Christian

    You did a very good job explaining responsive webdesign.
    Keep up the good work !!

    +1
  • Phill

    Saturday, June 1st, 2013 12:45

    57

    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

    +1
  • Cristian

    Friday, June 28th, 2013 09:07

    72

    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.

    +1
  • Blanca

    Friday, June 7th, 2013 14:04

    62

    Great tutorial, thanks a lot for all this useful info! Beautiful job!

    +1
  • Paolo

    Monday, May 27th, 2013 12:32

    54

    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

    +1
  • Bertz

    Wednesday, May 8th, 2013 17:00

    44

    Now I finally understand what is a responsive website.

    thanks a lot, Christian :D

    +1
  • Jack

    Wednesday, April 17th, 2013 21:57

    39

    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?

    +1
  • Sonya

    Tuesday, May 14th, 2013 16:25

    49

    Hi. What is the name of the web editor you are using?

    +1
  • Tom Ireland

    Saturday, April 13th, 2013 05:07

    36

    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.

    +1
  • Angela

    Monday, April 15th, 2013 11:20

    37

    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!

    +1
    • Christian

      Friday, April 26th, 2013 20:28

      41

      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.

      +2
  • MagnMagnus

    Saturday, May 11th, 2013 19:34

    45

    Nice tutorial, Christian:) Thanks a lot!

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

    +1
  • Sammy

    Monday, May 13th, 2013 15:33

    48

    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!

    +1
  • James Britto

    Monday, May 13th, 2013 14:50

    47

    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…

    +1
  • Suman

    Friday, June 28th, 2013 04:03

    70

    Hey Cristian,

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

    -1
  • Tushar

    Thursday, June 27th, 2013 07:25

    69

    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

    -1
  • Kuldip D. Gandhi

    Tuesday, June 25th, 2013 09:59

    68

    Very Very Useful Information taught by you. Must see for newbies.

    -2
  • Isuru

    Friday, June 28th, 2013 06:54

    71

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

    Isuru Wakkumbura – Sri lanka

    -3
  • Michelle

    Sunday, June 23rd, 2013 21:52

    67

    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

    -3
  • Paweł Grzybek

    Tuesday, April 9th, 2013 14:05

    13

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

    -14
  • James

    Saturday, July 6th, 2013 11:11

    75

    Many thanks for a great tutorial and especially for keeping it simple.

    +8
  • Sid

    Wednesday, July 3rd, 2013 13:38

    74

    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.

    +7
  • jyothi

    Monday, July 1st, 2013 03:02

    73

    Very well explained. I loved it.

    +6
  • Cristian

    Friday, June 28th, 2013 09:07

    72

    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.

    +1
  • Isuru

    Friday, June 28th, 2013 06:54

    71

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

    Isuru Wakkumbura – Sri lanka

    -3
  • Suman

    Friday, June 28th, 2013 04:03

    70

    Hey Cristian,

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

    -1
  • Tushar

    Thursday, June 27th, 2013 07:25

    69

    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

    -1
  • Kuldip D. Gandhi

    Tuesday, June 25th, 2013 09:59

    68

    Very Very Useful Information taught by you. Must see for newbies.

    -2
  • Michelle

    Sunday, June 23rd, 2013 21:52

    67

    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

    -3
  • Ross

    Thursday, June 20th, 2013 07:59

    66

    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

    Wednesday, June 19th, 2013 06:33

    65

    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!

    +4
  • Abbas Ali Butt

    Thursday, June 13th, 2013 04:15

    64

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

    +8
  • Blanca

    Friday, June 7th, 2013 14:04

    62

    Great tutorial, thanks a lot for all this useful info! Beautiful job!

    +1
  • Steve

    Wednesday, June 5th, 2013 11:11

    61

    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!

    +8
  • Abbas

    Wednesday, June 5th, 2013 02:59

    60

    Hello,

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

    +7
  • Hector Jayat

    Sunday, June 2nd, 2013 13:19

    59

    Excellent post and Website
    Congrats!

    +4
  • Sara

    Sunday, June 2nd, 2013 01:29

    58

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

    +18
  • Phill

    Saturday, June 1st, 2013 12:45

    57

    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

    +1
  • George

    Friday, May 31st, 2013 16:09

    56

    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.

    +2
  • Dielen

    Thursday, May 30th, 2013 07:25

    55

    Hey Christian

    You did a very good job explaining responsive webdesign.
    Keep up the good work !!

    +1
  • Paolo

    Monday, May 27th, 2013 12:32

    54

    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

    +1
  • Tina

    Sunday, May 26th, 2013 01:52

    53

    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.

    +1
  • Sharad

    Thursday, May 23rd, 2013 05:54

    51

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

    +1
  • Nn

    Wednesday, May 15th, 2013 03:49

    50

    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

    +2
  • Sonya

    Tuesday, May 14th, 2013 16:25

    49

    Hi. What is the name of the web editor you are using?

    +1
  • Sammy

    Monday, May 13th, 2013 15:33

    48

    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!

    +1
  • James Britto

    Monday, May 13th, 2013 14:50

    47

    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…

    +1
  • Waitong

    Sunday, May 12th, 2013 04:39

    46

    Thanks a lot! A really good tutorial:)

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

    +2
  • MagnMagnus

    Saturday, May 11th, 2013 19:34

    45

    Nice tutorial, Christian:) Thanks a lot!

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

    +1
  • Bertz

    Wednesday, May 8th, 2013 17:00

    44

    Now I finally understand what is a responsive website.

    thanks a lot, Christian :D

    +1
  • John

    Tuesday, May 7th, 2013 21:53

    43

    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

    +3
  • Pottymus

    Monday, April 29th, 2013 20:53

    42

    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.

    +3
  • Aaron

    Monday, April 22nd, 2013 15:32

    40

    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

    +5
  • Jack

    Wednesday, April 17th, 2013 21:57

    39

    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?

    +1
  • Shery-Ann

    Tuesday, April 16th, 2013 09:33

    38

    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!

    +1
  • Angela

    Monday, April 15th, 2013 11:20

    37

    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!

    +1
    • Christian

      Friday, April 26th, 2013 20:28

      41

      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.

      +2
  • Tom Ireland

    Saturday, April 13th, 2013 05:07

    36

    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.

    +1
  • Yann

    Saturday, April 13th, 2013 02:24

    28

    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 !!!

    +3
  • Ravi Karthick S

    Friday, April 12th, 2013 16:21

    27

    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!!

    +2
  • John

    Friday, April 12th, 2013 15:41

    26

    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!!

    +2
  • Linda Sloan

    Friday, April 12th, 2013 14:15

    25

    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.

    +4
    • Christian

      Saturday, April 13th, 2013 04:45

      29

      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.

      +8
  • Chris

    Friday, April 12th, 2013 11:21

    24

    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.

    +3
  • Tim

    Thursday, April 11th, 2013 19:29

    23

    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

    +1
    • Christian

      Saturday, April 13th, 2013 04:46

      30

      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.

      +6
      • Priiyanka

        Wednesday, June 12th, 2013 17:16

        63

        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

        +1
  • Vishal

    Thursday, April 11th, 2013 04:12

    22

    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

    +1
  • Pratik

    Wednesday, April 10th, 2013 23:43

    21

    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 ?

    +6
    • Christian

      Saturday, April 13th, 2013 04:53

      34

      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.

      +8
  • Jonathan Grieve

    Wednesday, April 10th, 2013 12:24

    20

    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 :)

    +1
    • Ij888

      Friday, May 24th, 2013 22:19

      52

      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 :)

      0
  • jennyx

    Wednesday, April 10th, 2013 09:25

    19

    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!

    +2
  • Larry

    Wednesday, April 10th, 2013 07:37

    18

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

    +1
  • Gretchen

    Wednesday, April 10th, 2013 06:23

    17

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

    +9
  • Narey

    Wednesday, April 10th, 2013 04:50

    16

    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!!

    +2
    • Christian

      Saturday, April 13th, 2013 04:57

      35

      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 :)

      +2
  • Barry

    Tuesday, April 9th, 2013 16:31

    15

    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

    +1
  • Jaqueline Mariano

    Tuesday, April 9th, 2013 15:07

    14

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

    +1
  • Paweł Grzybek

    Tuesday, April 9th, 2013 14:05

    13

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

    -14
  • Dumitru

    Tuesday, April 9th, 2013 13:46

    12

    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.

    +1
  • Awais Raza

    Tuesday, April 9th, 2013 13:00

    11

    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

    +53
  • John

    Tuesday, April 9th, 2013 11:10

    10

    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?

    +4
    • Christian

      Saturday, April 13th, 2013 04:50

      32

      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.

      +3
  • Sue

    Tuesday, April 9th, 2013 09:18

    9

    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!

    +1
  • Max Emanuel Vasiu

    Tuesday, April 9th, 2013 04:53

    8

    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.

    +1
  • stu morris

    Monday, April 8th, 2013 18:51

    7

    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.

    +2
  • Mihovil

    Monday, April 8th, 2013 13:23

    6

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

    +1
  • Marek Zeman

    Monday, April 8th, 2013 12:37

    5

    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 ;)

    +3
    • Christian

      Saturday, April 13th, 2013 04:52

      33

      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 :)

      +7
  • Jonathan Grieve

    Monday, April 8th, 2013 12:22

    4

    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)

    +1
  • Dueep J.Singh

    Monday, April 8th, 2013 11:55

    3

    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!

    +1
    • Christian

      Saturday, April 13th, 2013 04:49

      31

      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 :)

      +1
  • Gary

    Monday, April 8th, 2013 11:41

    2

    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!

    +1
  • Mary

    Monday, April 8th, 2013 10:01

    1

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

    +14

Comments are closed.

54.196.206.80 - unknown - unknown - US