How To Make A Responsive Website With HTML5 and CSS3

15 Comments/by
YouTube player

Please subscribe on YouTube 😊

Download Starter Files

In the video attached to this blog post you’ll learn how to make a simple responsive website with HTML5 and CSS3. For this template, we will have seven different sections running down the page as follows. When laying out the HTML for a responsive website, it’s important to plan out which aspects you’d like to be responsive so you can design for the smallest screen size using the “media queries” in your CSS. Three of our seven sections will not require media queries as the content will remain the same no matter the width.

15 replies
  1. kurtis
    kurtis says:

    Please can i get the source code for How To Make A Responsive Website With HTML5 and CSS3

    Great video !!

    thank you

  2. raghavendra
    raghavendra says:

    You have created an awesome tutorial. It is very easy to understand and learn. I wish you also gave us the source code for this tutorial. It would have been very helpful. Thank you

    • Lisa
      Lisa says:

      Yes! I watched a video on Lynda.com and the guy made 3 versions of each image, at 3 different sizes. And he had 3 different CSS files for each size page as you shrink the browser to go from large to medium to small. The way Drew did this was so simple (although still kind of hard to figure out on your own). 🙂

  5. Will
    Will says:

    Thank you Drew!!! You’re awesome this video really did help understand the relationship between html and css. Can’t wait to watch the rest of your videos!

    Cheers!

    • Drew Ryan
      Drew Ryan says:

      Hey thanks Will! I have something coming out in a week or so that will be better than any video prior, check it out!

  6. Vanessa
    Vanessa says:

    Hey,
    i followed the step by step tutorial for the website design and it is not working.
    Can I email my code to you so you could check out what’s wrong.

    Thanks

  7. Richard
    Richard says:

    Thank you for a great lesson. I’m looking forward to working through the later one. I’ve learned a lot from your lessons.

  8. Kes
    Kes says:

    Good news! I found the issue, simply missing the ‘c’ in src for the jquery file…feel like an idiot! but glad it’s resolved, no need to reply, remove these useless comments from your site! Again, thanks for the tutorial, been great!

  9. Kailash
    Kailash says:

    You have created an awesome tutorial. It is very easy to understand and learn.
    Thanks a lot.
    Please can i get the source code for How To Make A Responsive Website With HTML5 and CSS3

    Thanks and Regards
    Kailash Tathe.

  10. Harry
    Harry says:

    Watched quite a lot of tutorials but yours are the best so far.
    I am a starter and learn a lot from you. Keep on with that stuff.

    Thanks Drew!

  11. Dave
    Dave says:

    Thanks alot Ryan, this is an awesome easy to follow tutorial but pls i still cant get the source code for d slides and if i move my mouse pointer to my texts they turn white. What am i doing wrong please.

Comments are closed.