CSS Media Queries & Responsive Web Design tutorial for Beginners

[@DaveGrayTeachesCode]

CSS Media Queries are essential for Responsive Design. This tutorial looks at everything from the basics of media queries to how to choose your media query breakpoints when applying responsive design to your web pages. If you're just getting started with CSS, I recommend going to the start of this CSS for Beginners playlist: kzbin.info/aero/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

[@obeng-yeboahk.d1914]

I never understood media queries until now.. thanks Dave

[@laszlotabor]

You just helped me out so much Dave... I was struggling for a half day when I bumped into your vid...things clearing up now! Thx mate!

[@DaveGrayTeachesCode]

Glad it helped!

[@Techvideos-q7u]

Gray your outro is always so heart whelming 🙏

[@verydifferentthought]

u are very good teacher, i am literally watching this from Uzbekistan :)!

[@DaveGrayTeachesCode]

Thank you! And hello to you in Uzbekistan! 👋

[@CTILET]

Me too)

[@marie-elizeventer7080]

Thank you so much for taking the time to make these tutorials Dave. This one has been super helpful in helping me understand media queries

[@DaveGrayTeachesCode]

Great to hear!

[@AdamChou-mu3ow]

What a beginner-savior(babysitter-level) content!!🤩It covers all I needed!!! 😭Thank you very much!! Hopes for sequels!!!🙌👐

[@DaveGrayTeachesCode]

Glad it was helpful!

[@powerfulspirit9242]

Hi Dave🙏 I have been following you from html. Your videos are awesome 👌. I must be lucky to find you. 🙂🙂🙂

[@DaveGrayTeachesCode]

Thank you! 💯

[@hiwayshoes]

Hi Dave! Lovely tutorial, media queries have always been a pain point for me, but you’ve cleared things up immensely. As always, you provide many opportunities for practice… Cheers 💖!

[@DaveGrayTeachesCode]

Thank you for the kind words, and glad I could help! 🙏💯

[@dzutest5343]

makes two of us

[@Biikashkumar]

Hi Dave, Thanks for your great tutorial. I was confused which video to chhose for media query. However, as I saw your name and my previous experience of watching your vidoe in freecodecamp, i blindly choose your video. I glad that I didi it. Thanks once again.

[@kaurmanjot]

Thank you so much Dave for this amazing video 😊

[@nextlevelMiracle45]

Brilliant tutorial. Thank Dave!

[@DaveGrayTeachesCode]

You're welcome! 💯🚀

[@ahmad-murery]

I don't know why but it's easier to me to design using desktop-first method and then squish things down to fit smaller screens (maybe it's the type of apps I accept), anyway, if we don't need to center things vertically we can get rid of the 3 grid related properties, Thanks Dave, great tutorial as usual,

[@DaveGrayTeachesCode]

Thank you, Ahmad! 🙏💯

[@championsleague2696]

i just completed the HTML 4 hours tutorial Including the Projects. Looking forward to starting this Css tutorial with you.

[@DaveGrayTeachesCode]

Great job! I'm still building the CSS playlist, but there is currently 17 lessons and over 6 hours in there. 🚀

[@sumeyyea]

omg İ think you read my mind i need to study of responsive design nowadays and bumm your video came on me, thank you Dave!

[@DaveGrayTeachesCode]

Glad I could help! 🚀

[@kevink3072]

I have just done a refresher about web responsiveness and media queries and am happy to go to sleep. Thanks, dave!

[@DaveGrayTeachesCode]

Excellent!

[@balogunadetunji546]

Wow best class it was strange at first but I enjoy it ❤️❤️❤️❤️😊😊

[@dzutest5343]

I definitely think you have given the right key to many researching online. This is a super tut👍

[@DaveGrayTeachesCode]

I appreciate that! 🙏💯

[@yucelbengu1307]

Omg! another amazing video thank you so much Dave I'm from Turkey even I don't have enough english ,I can understoon clearly :)

[@DaveGrayTeachesCode]

Happy to help! 💯

[@JESUSISGOD9334]

love this, this was so help full

[@edithsylvester1311]

crystal clear. thank you!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@CTILET]

Hi Dave! Thanks for your work!

[@DaveGrayTeachesCode]

You're welcome! 🙏

[@olamilekanolajide1622]

Thank you😊

[@DaveGrayTeachesCode]

You're welcome 😊

[@adamovtimur98]

Hi Dave I just want to say thanks a bunch for your tutorials :)))

[@DaveGrayTeachesCode]

You're very welcome! 🙏

[@mohamedabdelrazig6920]

Oh my god you’re honestly so amazing for uploading this so fast!!! Thank you so much!! Any chance you can cover the final topic of transformations & animations ? That would be so amazing!! Also on a sidenote I will most definitely support this channel when i land my first job you should start a patreon! :)

[@DaveGrayTeachesCode]

Thank you, Mohamed! I have a few more topics to cover including transform and animations. Thank you in advance for the support 🙏🙏

[@101stDay]

Fantastic explanation! I also use the whitesmoke named color a lot!

[@DaveGrayTeachesCode]

Thank you, Neil! 🙏 I do like that color 💯

[@harold.machado]

Thanks a lot....

[@Manny.Angulo]

Hi Dave! I finished the HTML 4 hour course and now im working on the CSS course. I created a blog and im updating it little by little with everything I learn from these videos. What should we move on to after this CSS course? Thank you for all your work by the way.

[@DaveGrayTeachesCode]

Nice work! 💯 I recommend building a few projects to reinforce your skills so you are on the right path. I am still adding to this CSS playlist each week, too. After HTML and CSS, it is time to learn JavaScript. I recommend my full JS course here: kzbin.info/www/bejne/e5eknWyYrN-JkM0

[@hadibq]

Great teaching skills ! Thanks for sharing! new sub indeed!!

[@DaveGrayTeachesCode]

Welcome aboard!

[@marwaka]

the best tutorial i have watched

[@DaveGrayTeachesCode]

Thank you!

[@Grihlo]

Thank you for another lesson!

[@DaveGrayTeachesCode]

You're welcome!

[@esraamohamed5601]

Thank you

[@DaveGrayTeachesCode]

Welcome!

[@subhamprasadbhagat4527]

Hello Dave, Greetings for the day! I have been watching your videos and these are really awesome and helpful. I have one question and I need one clarification. Clarification - @time-stamp 16:40 - you said it will be valid upto 576px, but in the output it is reflecting from 576px. As there we are designing for small screen, shouldn't we use max-width:576px, instead of min-width? There is some confusion in that section of the video. Question - when we write (orientation: landscape), will that work for any mobile device in landscape and even in tablet landscape? Please explain, Thank you. :)

[@stormbytes]

Outstanding presentation

[@DaveGrayTeachesCode]

Thank you! Cheers!

[@roydeloiza6663]

This is amazing!

[@DaveGrayTeachesCode]

Glad I could help!

[@kiddofrancesco1622]

Good content! My question is when you use activate landscape mode naturally what it means is that the height and width have been interchanged so do we need to consider the max-height in terms of portrait or landscape vice versa?

[@DaveGrayTeachesCode]

No the height and width are also inversed.

[@umutpiynar9309]

Only part I didn't understand was using min-width instead of max-width. Like if the max-width is smaller than 578 we should destroy the navbar since it's a small screen but you did the complete opposite idk why.

[@DaveGrayTeachesCode]

I find responsive design is easier when starting with the smallest screen and working your way up - expanding - instead of working your way down and trying to squeeze things in.

[@umutpiynar9309]

@@DaveGrayTeachesCode Makes sense, thanks for answering.

[@Web-Himansu]

Sir how to learn advanced html,css and javascript. Can I learn these from MDN or any other resources

[@DaveGrayTeachesCode]

MDN is a great resource. The first link in the description is to my Web Dev Roadmap guide. It steps you through what to study from beginning to full stack. I also have an Advanced JS playlist on my channel.

[@abdomahmoud8769]

Hi Dave! can you explain this meta tag because you didn't cover it in your html course

[@DaveGrayTeachesCode]

Good question! It really isn't necessary these days, but the Emmet Abbreviation to create a page skeleton still puts it in there. A good explanation here: stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do

[@g2jnan427]

Sweet baby Jesus! I could not, for the life of me, figure out how to center my grid items. Thank you!!

[@DaveGrayTeachesCode]

Glad I could help!

[@mischief9499]

Sir can you tell the difference between width: 100vw and min-width: 100vw? I tried to write code to achieve a visual difference between these two but I end up producing the same result. Can you tell me what should I try to achieve a difference in these two so i can learn

[@DaveGrayTeachesCode]

min-width: 100vw will allow a width _larger_ than 100vw. width: 100vw will not.

[@mischief9499]

@@DaveGrayTeachesCode ok

[@tabarna2364]

Hi Dave, I finished your 4h html5 course and I'm about to finish your css course as well. But what I want to say is I dont want to use javascript on my projects because of privacy concerns probably my targets will be disabled js on their browsers. Any chance to make fully functional web apps or websites ? maybe with server side languages ? I would be very happy if you could suggest me somethings. Also if you could create a community on discord or telegram or something like that, that would be amazing too. You could help much more people

[@DaveGrayTeachesCode]

Thank you, Tabarna! 🙏 You can use other languages to build your frontend along with HTML & CSS such as PHP.. but you may still find that you need some JavaScript. JavaScript runs in the browser while PHP will render from the server. I recently opened my Discord, too! Here is the link: discord.gg/neKghyefqh

[@dharmeshgohil9375]

Like it most

[@DaveGrayTeachesCode]

Thank you, Dharmesh! 💯