HTML5 and CSS3 Responsive design with media queries

[@graphicisland5860]

i have been looking for tutorial on responsive website for two days without sleep. i am going to sleep now. this is all i needed. thinks 100%

[@noone-gr4is]

One of the greatest tutorials on web development! You explained everything cleanly!

[@QuentinWatt]

Wow, thanks!

[@vibhutidesigner]

I searched the entire internet trying to find the perfect explanation for responsive websites thinking you didn't have one. AND I LANDED HERE AGAIN! You posted this like 5 years ago damn! You, Quentin, are the best teacher with the most simplified and logical explanation. Thank you thank you thank you!

[@QuentinWatt]

Thank you. :)

[@chrismachabee3128]

Absolutely Fantastic. From a guy who has had a ton of instructors, you are top 5. Clear, sharp, correct, and great. Thank you. past few weeks studying CSS Gris, Flexbox, Responsive design. I had a few questions. So, I says to meself, I look up Responsive CSS. OK, I find your KZbin instruct video. Ties everything in a nice neat bow. Thanks again, you sir, are the best.

[@ArtandPianoTF]

Very good tutorial! I just have a little hint concerning the scaling of pictures: img{width:100%} means that every image will be stretched to the whole screen, even if the original size is smaller. IMHO img{max-width:100%} works better and is scaling down only.

[@QuentinWatt]

+Thomas Fischer Yes, you are are correct. That is a better style rule.

[@ZonkoKongo]

+Thomas Fischer thx

[@ZonkoKongo]

btw nice video really helpful and good

[@fusion5329]

+Quentin Watt Hey if you would have time to respond to my question i would be more than greatful! :) So you know the way you put @media screen and(max-width:960px) or similar do you have to put in the exact same text? I have tried expirment with it but i have to have all of the text in one with that i mean this media and screen thingy. I was just wondering if its possible to put in something else? or a smaller text?

[@MattTravisMedia]

Thomas Fischer Thank you sir!

[@alisonedmondson5558]

I was totally and utterly stuck with making my website responsive. I followed your tutorial and it worked!! Can't thank you enough. Assignment due in tomorrow!!!

[@MrRight1000]

That was most lovely presentation. I knew the material, but still enjoy watching it. Thanks.

[@bchitala]

Excellent tutorial. In my view Quentin is among the top best web development tutors on KZbin. Gives out his best knowledge without reservation. As a matter of fact, I cannot agree more with other commentators that say he is perfect.

[@illegalCommunityM2]

Such a great tutorial. Looks like i wont sleep tonight.

[@devanshutripathi9589]

why what are you thinking about

[@GaryBarker-cartoonist]

Finally! Someone who can explain coding in a way complete novices like me can understand, thanks Quentin. All I have to do now is figure out how to apply this to my site!!!

[@sajiraghavan]

Hi Quentin.... Yours are the best of all tutorials I have come across on the net. I am quite a beginner with an Art Background. I am able to understand every point and see them working perfectly making me very confident that I too can create a website. Appreciate your philanthropic nature.

[@programmingjo]

Hi, Quentin, Your videos on HMTL5 & CSS3 helped me a lot so far. I'm going for IT Web & Software developer, and your videos were and are extremely helpful to me. More than Murach's book. I would like to thank you for your generosity in sharing your knowledge with us. I have to admit. I download all your videos and keep them as a bible for this subjects. Thank you man! You're awesome!

[@flick00]

Fuck yeah... This shit is what I have been looking for, for weeks... Thanks a lot mate... Pardon my language...

[@patrickmadlang-awa2190]

Quetin Watt's Chanel should really grow, for being unselfish with his knowledge..

[@LakshmiDevilifentravels]

Explains so cool and simple.Really loved the way you walked through.Excellent Tutorial.Keep going!!!

[@akshaytomar7030]

i m from India ,i fallow u last 10 month u r just awesome...i like your teaching method

[@OfficialDevTips]

What is the browser tool you are using to scale the site? 10:40

[@QuentinWatt]

It's the responsive desgin tool built in to Firefox. Keyboard shortcut shift+ctrl+m.

[@OfficialDevTips]

oooohhhhhhhhhhh. cool.

[@simonpatis]

DevTips When using the Firefox responsive design mode I find that using the Shift key is really helpful for incrementing the scale in units of ten ;0)

[@QuentinWatt]

Thanks for the tip.

[@evorty9179]

Lol are you still here?

[@intraprisesolutions5496]

Very well done. Just the right amount of information, sizing details, and concepts to enable one to begin playing around, even as display and device sizes change over time...

[@sjoerdschepers3095]

A like for a man who helps me out!

[@jamdownmatket]

You are the only one that I was able to follow and do exactly what you demonstrate. You are a very good teacher you make it very simple. Thank you for taking the time out to do theses video "I find them very helpful".

[@jromeroevo]

You are the best . This was so simple to follow.

[@criticalhacker8581]

Jose R I agree, honestly I've never had a better teacher! And when I say awesome I mean it. Awesome work with the video, in my opinion you deserve more then 1mn likes, how dare 100 pepole dislike this video?!

[@remnant1018]

Excellent! I asked my teacher what to do about testing/designing for smart phones. I found this video the very next day ☺️ Squeak all you want. I'm all ears.

[@ivano.garcia5222]

Thanks You! Very useful and exactly what I was looking for!

[@devanshutripathi9589]

firstly dude correct your grammar or use grammarly dont keep designing

[@jacobmade9566]

This is probably the best tutorial on this subject, I havent understood the media queries until now, THANK YOU!!!!

[@prodz1719]

[@bryandelacruz9066]

[@mlsdd]

Where to we add the media screen, on top of the css or at the end?

[@gerwinkuijntjes4738]

Star Cat at the end

[@soumen9458]

I must say....!! you're seriously a very good instructor and a teacher...i really loved the way you explained...and i understood every part of it...and because i'm a newbie in website designing...i really got to learn so much ...thanks buddy...!! :)

[@wjfox2006]

This was an incredibly helpful video - thanks! :)

[@brightsideduo6020]

Best explanation of media queries I've come across. Easily. Thanks very much!

[@arkano01]

simple but very effective!! thanks!!

[@danielromen1858]

So I am a Coder and I really wondered about what I should do at the condition the screensize is under my minimum size. Just a perfect video.

[@HiDefinition1080p]

@5:50 the media queries part begins

[@devanshutripathi9589]

you are guy

[@studiocity10]

i've been avoiding this vid for 4 months.. So glad i watched it. Thanks , youre a very talented teacher indeed!!

[@Gallery296.photography]

Linked this tutorial for a Web Design II undergraduate course. Thanks

[@harrisonkamau597]

I never thought that media queries would be so easy to grasp! Thank you sir!!!

[@RevafallDCUO]

And they say heroes doesn't exist

[@ragn594]

don't*

[@charankumar9897]

@@ragn594 haha nice catch ....hero doesn't and heroes don't.

[@aidn_sthu3567]

@@ragn594 lol English is probably not their first language.

[@noobgamer1562]

I was learning it in an online tutorial bui i did't get the best result ,but by the help of this video i have cleared ,.,.... thank you so much

[@susheelindulkar]

JUST PERRRRFECT !!!

[@kelvinkipchumbakoech9758]

Wow! Have been looking for way to make my website responsive but this tutor has just taught me

[@kidsu3678]

It's a awesome tutorial! Thank you :)

[@SoItGoesCAL34]

Thanks for showing how simple this is. I have a website that needs to be converted to responsive but have been too overwhelmed and afraid to begin. No fear now. I can do this. I have some planning to do in how to display a couple of pages that have a table with 8 columns but no problem... seems like fun. Must look at your other videos for ideas. Thanks again.

[@priyankatanwar5681]

Awsom.... :) really very hlpful

[@OlovForsgren]

Thank you Quentin, the best tutorial on responsive web design so far. Just in an hour I had a very well working web site, and a template for many more. I need to check out more of your videos.

[@theatifkhan]

/* Good tutorial */

[@noelasaji5238]

Guys who take time to share their knowledge are the best!!!

[@QuentinWatt]

Thank you

[@RazacxX]

These days phones can have resolutions up to 2560px x 1440px (larger than most computer monitors). Would this method still be applicable to these types of devices?

[@swallowedinthesea11]

Wow!

[@jacobtodd275]

well adjust ur css media query to those resolutions.

[@farzadfara1]

Excellent Quentin. Short, clear and comprehensive to start with "Responsive Design". Hope to see advance tutorials. Thank you.

[@creationduwal]

I dont think internet is expensive for somebody if he/she is being a developer and is using a device for programming and designing.

[@synthtv5976]

People are in unique circumstances, circumstances that you know nothing about.

[@synthtv5976]

People are in unique circumstances, circumstances that you know nothing about.

[@raymondsantos6128]

You just save our lives. Thank you for explaining everything thoroughly and clearly. Love lots!!!

[@sergeynazarov2473]

Conceptual, but not useful... Will be great to do tutorial on real site as landing page and response it from start to end with note as many conditions.

[@QuentinWatt]

Soon.

[@Jourden82]

To the point, easy to understand and simple. Thank you. Have answered a number of my questions.

[@boldbileg]

We get it... you need money. Get on with the video.

[@paulcamposgil]

Thanks for all your videos Quentin. Just finished all 52 HTML5 and this one. Great help. Will continue with Javascript and bootstrap now. Keep it up !

[@me-jk9rl]

Awesome lesson given ever..Even the beginners could easily understand this video!! Hats of yu Quentin.. Hope this video makes everyone a good web developer...

[@abdikafimohamud2931]

Thank you so much Quentin. You really helped me because I was confused how to make a website responsive and you gave me the exact answer I needed within short amount of time. I can't thank you enough.

[@tomvanlier1533]

Great tutorial, I recommend it to start with css3 resp design and media queries. In fact, later today I will start adapting a site to be responsive thanks to this very clear explanation.

[@melindabrack]

Thank you Quentin, I've been running in circles trying to work out how to do this. Who would have thought it was so straight forward. Great video.

[@pacaron714]

Stunning how that works.. and it works very well. Thanks Quentin for the 'easy to learn and follow' lesson. I couldn't find the source code so I typed it from the video AND I subscribed.. I want more!

[@EnglishVocabularyBooster]

Very good! Thanks a lot for video! While others teaching this for hours and hours, you made it clear in 15 min.

[@okijohn7153]

Wow Wow Wow, simple and precise. Thanks so much for saving me all the stress

[@alexlar23]

congratulations sir you just learned me in no time how to do responsive web design!thank you so much!

[@MohiyuddinShaikh]

This video is definition of clear and concise.

[@rameshguttula34]

Your Tutorials are VERY EASY to UNDERSTAND and the way of YOUR TEACHING is EXCELLENT.... Thank You Friend...

[@mikemerr]

Not sure why ppl give a thumbs down on this video, this was very awesome! very helpful

[@jasonroy2308]

Thanks for letting me know about Audience Retention. I used to download the videos since I have to refer back to it. But from now, I'll make sure I watch it on KZbin. :) You deserve it, bro.

[@nuralam-lx8gf]

i have seen lot of tutorial with various language but your tutorial is seems to me very useful to understand. i wana salute you once again! and also have to say...love you broooo...

[@charankumar9897]

Shit man , why I didn't know you till now??? Your way of explaining is simply superb. If you explain like this one can easily learn complicated things with keen interest and it's very easy to understand too.

[@QuentinWatt]

:) thanks

[@northmania5332]

I rarely subscribe to anyone, but after seeing this , there was no way I miss the subscribe button :) !

[@northmania5332]

I even shared it on my twitter. Gratz !

[@QuentinWatt]

Aleksandar Stefanov Thanks! Your awesome.

[@jimcoburn7856]

Worked for me. Tried it on another sample HTML5/CSS4 site I was building, and it worked perfectly.

[@marseljgn]

Your tutorials are such a blessing! Thanks you so much! Im watching your html&css tutorials and I am learning a lot. Thank you! Thank you! Thank you!

[@ashleyseeley7813]

Thank you!! This video was awesome! I am taking an online class and this has been the biggest help!!

[@konstantinsemenyuk5123]

Quentin I love you You're the most informative tutorial guy out here. Thanks

[@robertsacamano]

Hey, a good trick is to use DPI in media queries, now that a lot of smartphones are coming wigh high-res screens, and that kind of mess our use of resolution. Great tutorial btw, clear and precise.

[@rotrose7531]

You are great, though I sometimes try to figure out the these rules by myself, this is the first time that I understand the logic behind it. Thank you.

[@karimtahraoui3344]

DUUUDE you make it very clear in 15min !!! you just got a new subscriber you rock my man!

[@edonl4555]

You are diffferent that others; Simpe and Professional Thanks the best explain ever for Responsive

[@sueholder703]

Excellent, clear and a good pace with awesome explanations!

[@davidmack9842]

Your tutorial skills are excellent. One of the best web development videos I've seen. Well done, and cheers!

[@softnstyleify]

Quentin Watt, I really liked your video as well as your way of communication & guideline. Great work. I hope, we may have more good work from you soon.

[@ikravchik]

Thanks Quentin, a clear and easy to comprehend tutorial. Helped me a lot.

[@MrLaxr-op4be]

Your content was so helpful .. my responsive design wasn't working. After watching your video I figured my fault. So, thanks again !

[@QuentinWatt]

Happy to hear it helped.

[@1playfair]

Excellent Bro. Really helped clear up some things. Had that Eureeka moment and called the wife to let her know I was finally getting it lol. Keep up the good work.

[@AzTreandwealth]

incredibly simple and easy to understand video. Thank you so much Quentin.

[@AJCollinsAuthor]

Fabulous. Clear and concise tutorial. Well done.

[@lunarninja76]

This is what I searched for 👌great man 👍👍

[@SherylJohnson0102]

Great video - I was working with existing code and didn't understand it. Now that I've seen this video, it's all perfectly clear!

[@mariebrown3532]

Thank you for this very informative tutorial! I am taking my first class in html / css and was having troubling with this process.

[@TheSmartsharp]

Excellent Tutorial ... Clear & Concise Explanation ... Keep it up!!!

[@prakashkrishnan3283]

Thanks for this dude, this is a really nice demo of responsive styling. You nailed it with this. Short and sweet

[@QuentinWatt]

+prakash krishnan thank you :)

[@giannidali9226]

Amazing tutorial. Easy to follow. And i was finally able to wrap my head over media queries

[@ranaahmad364]

Really Amazing Tutorial, Its exactly the same what I am looking for many days. Thanks a lot...

[@bfresh913]

Very nice video it showed me how to correctly make a page responsive with out using bootstrap. You also explained it very well!

[@librallawrence7893]

Very clear and simple explanation. Awesome! Liked and Subscribed.

[@OfficialDevTips]

TIP: You need to design for 320px wide for a retina screen on an iPhone 4+ also. Design for 320px, not 640px - ref: 13:13

[@OfficialDevTips]

Just to be clear, you didn't say it wrong Quentin. But it's a confusing concept, so I just thought I'd chime in. Sorry I'm being rude.

[@QuentinWatt]

DevTips Thanks Travis. 320px is the phone in portrait and at the time of recording I thought 640px was the phone screen width in landscape, which I didn't clearly mention in the video.

[@OfficialDevTips]

oops, I wasn't clear also. lol. What I'm trying to say is that even though modern iPhones have 640 physical pixels in width. When you design the layout in the browser you need to think of it as 320px wide. The retina display isn't giving you more screen real-estate, it just makes the visuals crisper. If you designed the layout for 640px thinking it would look like that on a iPhone, when you checked it, you would see that your layout is hanging off the edge of the screen. So when you are in the browser and you are making things responsive; 320 is the number for all iphones, 1-5s. Don't design for 640 in the browser. Now creating designs for native apps on the iPhone is a bit different. I'm talking about browser stuff.

[@QuentinWatt]

DevTips :) Thanks. I did test it on my S3 before I posted this video and it was displaying in the 320px like you say, but this actually flexible so it will still display as 320px on the iphone as well. 640px in this case is just the width at which I decided that the section and aside should no longer be floated next to each other.

[@OfficialDevTips]

Yea Yea, you did/said everything right. I was kind of just thinking out loud. :)

[@bubear254]

Fantastic tutorial!!! Exactly what I was looking for.

[@artemlobov3685]

Why did I not watch this before, great tutorial, thanks!

[@micheloscar94]

Im about to try this. I have been looking for the right technique to make a site responsive. Trying a responsive template on Dreamweaver makes me feel like I didn't learn anything. If this works, you know for sure im subscribing and sharing this among my web design colleagues!

[@micheloscar94]

(I already subbed to your channel! 👍)

[@QuentinWatt]

Thank you! :D

[@micheloscar94]

+Quentin Watt Tutorials Unfortunately I couldn't get this to work. Im so confused. The width sizes you used accommodated your design but not mine. I will keep watching the video to understand responsive design well.

[@AlistairEdwards]

Responsive design makes so much more sense now. Thank you!

[@chetankumarbudanpur5231]

Informative video for beginners. More curious to learn more. Thank for sharing.

[@RainParadis]

Badass, thanks so much!! Your explanation was super easy to follow and understand. You explain what each part does and how it works which help tremendously. Thanks so much! subscribes!

[@ourhedgehogsshropshire6459]

Your a life saver, so easy to understand, you've helped me out so much .. thanks

[@QuentinWatt]

Adrian Standley It's a pleasure. Thanks for watching.