April 2, 2014

Responsive Web Design Tutorial

In this video we learn what Responsive Web Design is and how to write the necessary code to create our own custom responsive web layouts. A more technical term for this lesson would be “An Introduction to Media Queries.”

Demo Page Shown in Lesson
Direct link to “Desktop” CSS
Direct link to “Mobile” CSS
Download all demo files as a .zip

If you would rather learn from a single, unified video course instead of individual one-off video tutorials check out my updated 8 hour video course and learn pro-level HTML, CSS, and responsive design.

About the Author

Brad Schiff

Brad Schiff is a front-end developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 500 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn front-end web development.

Follow Brad on Twitter Subscribe on YouTube

14 thoughts on “Responsive Web Design Tutorial

  1. You gave very clear and important explanations for essence of responsive design. And it was easy to follow you. You can take last sentence as great compliment.
    Thank you.

    Best regards,
    Zoran Ninković

  2. Responsive design is something I am still struggling with and your tutorial was very clear and helped understand it a bit more.
    Did download the files and strangely by altering the CSS it brakes the page in IE, not in Opera or Firefox though.

    1. Hi Tony,

      What version of IE are you testing in? 11, 10, and 9 should be fine. IE8 and older do not natively support media queries; meaning those older browsers will only receive the CSS that is not within a media query. If you really need IE8 and older support you can search for the polyfill named “Respond” which can be found on GitHub.

      If you’re testing in IE9 or newer and the layout breaks I’d need to know what you changed or what specifically “broke” 🙂

      Thanks!
      Brad

      1. Thanks for your reply, I am using IE 11.

        It works fine but even just changing a color in the CSS will do it. Changing it back will not help only replacing the whole CSS file will fix it., weird!!!

  3. Your video was exactly what I was looking for. Clear explanations and easy to follow sample code. I have used the sample site immediately as an ‘under construction’-placeholder for a site I’m working on. Thank you for sharing your knowledge!

Leave a Reply

Your email address will not be published. Required fields are marked *