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.
This is awesome. Thank you VERY much!
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ć
Thank you very very much..
All my respect for you =)
Great tutorial!
its really easy to follow , excellent . thanks
It is so generous of you to share your expertise in such an easy-to-follow way. Thank you!
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.
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
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!!!
Finally, someone who explains this stuff clearly. Thanks Brad!
really , your classes are the best .
Thank you for helping me a lot.
thanks
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!
Very clear presentation. It is very usable. Thanks so much