Responsive Web Design Tutorial and Explanation

Share it with your friends Like

Thanks! Share it with your friends!


Learn what Responsive Web Design is, and how to write the necessary code to create our own custom responsive web layouts. Through November 24th save 70% off my premium 8 hour HTML & CSS video course:

Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need:

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:

Demo files:


Хауди Хо - Просто о мире IT! says:

Good approach into responsive, but using of Bootstrap (or etc) for building the structure is lot more efficient. I believe that people today might want to use media queries "as is" only for something special (not basic structure of content). Like+

SuperDallasTV says:

How could you not like this video!!!!

Nick Faga says:

This is a great tutorial, but if you have Dreamweaver, you can use the boilerplate.css file and respond.min.js to get your stuff set up. Note that with those files, it works better to code the layouts in order from smallest to largest and not the other way around.

Graice fay-downes says:

Brilliant video. Clear and concise and easy to follow. I got a lot out of watching it x 2 so far, it cleared up issues I was having understanding media screen code in context of content and layout. Thx

slapmyfunkybass says:

Nice tutorial. Not trying to pick holes, but I can't see how it's always appropriate though. For example, you have a galleries section on the left with a menu choice of gallery on the right. If there's a lot of photos, when viewing on a mobile the user is forced to scroll down through every photo to get to the menu choice. It would make more sense to simply let the user scroll left to right.

One other issue I have is tablets and mobiles, by their very nature, are designed to deal with non responsive websites. Users are comfortable with enlarging and swiping.

Johnny Depp says:

Awesome.. Thank you, much appreciated.. :)

Ton Bil says:

The introduction – explaining what responsive web design is – is really good. (I didn't look at the other parts, I just needed this explanation for now.)Thank you!

Elizabeth DeLorenze says:

Hi hi! Have you thought about – Exo Auto Cash Sites (do a google search)? Ive heard some pretty good things about it and my work buddy got amazing money with it.

An Sharma says:

Best tutorial for responsive design.
Thanks a lot :-)

Sivak Games says:

Very well done. I actually have to do this in my job tomorrow and it's my first time. I decided to look into it a bit.

It's amazing how many written tutorials out there that can't even tell you right off the bat about that "screen and max width" command and write about other nonsense. All I needed was that command, but I stuck around for everything else and definitely got a feel on how to proceed. Thanks.

Charles Legg Jr. says:

Your tutorial demystified the whole RWD code and is very well done. Thanks for sharing with us.

Freddie Keen says:

is there a way to implement <link… media=…> within a <style> tag. My system wont let me upload css files atm and so i can only copy in HTML

Georgi Georgiev says:

Thank you very much for the tutorial.
GOD bless you.

sandile mazibuko says:

great video.!!! cool staff

Ryan Zad says:

can you please provide the full code online?

Dale Robbins says:

Best responsive web design tutorial seen so far on youtube.

Pete Sylvester says:

Very well done in breaking this down so well.

Kris Maly says:

Revisiting to refresh on the subject.

May I know what is the Editor software that you were using during demo.

Also may I know what is the video capturing software used to create this video?

Thanks a bunch

Write a comment