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: kzread.info/head/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

I never understood media queries until now.. thanks Dave

Thank you so much Dave for this amazing video 😊

love this, this was so help full

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!

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!

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.

Brilliant tutorial. Thank Dave!

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! 💯🚀

Hi Dave! Thanks for your work!

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! 🙏

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

@DaveGrayTeachesCode

Жыл бұрын

I appreciate that! 🙏💯

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

@DaveGrayTeachesCode

4 ай бұрын

Glad it was helpful!

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

2 жыл бұрын

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

@dzutest5343

Жыл бұрын

makes two of us

crystal clear. thank you!

@DaveGrayTeachesCode

Жыл бұрын

Glad it was helpful!

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

2 жыл бұрын

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

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

@DaveGrayTeachesCode

2 жыл бұрын

You're very welcome! 🙏

Thanks a lot....

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

@DaveGrayTeachesCode

2 жыл бұрын

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

Thank you for another lesson!

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome!

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

@DaveGrayTeachesCode

2 жыл бұрын

Thank you! 💯

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

@DaveGrayTeachesCode

Жыл бұрын

Thank you! And hello to you in Uzbekistan! 👋

@CTILET

Жыл бұрын

Me too)

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

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

@DaveGrayTeachesCode

Жыл бұрын

Welcome aboard!

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

2 жыл бұрын

Glad I could help! 🚀

This is amazing!

@DaveGrayTeachesCode

Жыл бұрын

Glad I could help!

the best tutorial i have watched

@DaveGrayTeachesCode

Жыл бұрын

Thank you!

Thank you😊

@DaveGrayTeachesCode

Жыл бұрын

You're welcome 😊

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. :)

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

2 жыл бұрын

Happy to help! 💯

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

2 жыл бұрын

Thank you, Ahmad! 🙏💯

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

@DaveGrayTeachesCode

2 жыл бұрын

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

Thank you

@DaveGrayTeachesCode

Жыл бұрын

Welcome!

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

@DaveGrayTeachesCode

Жыл бұрын

Excellent!

Outstanding presentation

@DaveGrayTeachesCode

Жыл бұрын

Thank you! Cheers!

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

2 жыл бұрын

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: kzread.info/dash/bejne/d5p1zpubp928is4.html

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.

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

2 жыл бұрын

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

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

@DaveGrayTeachesCode

2 жыл бұрын

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

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!

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.

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

7 ай бұрын

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

@mischief9499

7 ай бұрын

@@DaveGrayTeachesCode ok

Like it most

@DaveGrayTeachesCode

2 жыл бұрын

Thank you, Dharmesh! 💯

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.