Responsive Web Design Tutorial and Explanation

Uploaded by admin on November 16, 2015 at 9:24 pm

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: http://learnwebcode.com/web-design-for-beginners-real-world-coding-html-css/

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: http://learnwebcode.com/web-hosting/

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

Follow LearnWebCode on Twitter for resources and updates:
https://twitter.com/learnwebcode

Demo files:
http://learnwebcode.com/responsive-web-design-tutorial/

Comments

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

November 16, 2015 at 9:50 pm

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:

November 16, 2015 at 10:29 pm

How could you not like this video!!!!

Nick Faga says:

November 16, 2015 at 10:51 pm

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:

November 16, 2015 at 10:53 pm

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:

November 16, 2015 at 11:06 pm

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:

November 16, 2015 at 11:21 pm

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

Ton Bil says:

November 16, 2015 at 11:59 pm

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:

November 17, 2015 at 12:24 am

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:

November 17, 2015 at 12:29 am

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

Sivak Games says:

November 17, 2015 at 12:48 am

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.