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: czcams.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
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 💖!
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.
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.
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: czcams.com/video/EfAl9bwzVZk/video.html
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! :)
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,
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. :)
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?
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.
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
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.
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.
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
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
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
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: czcams.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
Gray your outro is always so heart whelming 🙏
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!
Glad it helped!
I never understood media queries until now.. thanks Dave
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
Great to hear!
Thank you so much Dave for this amazing video 😊
u are very good teacher, i am literally watching this from Uzbekistan :)!
Thank you! And hello to you in Uzbekistan! 👋
Me too)
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 💖!
Thank you for the kind words, and glad I could help! 🙏💯
makes two of us
What a beginner-savior(babysitter-level) content!!🤩It covers all I needed!!! 😭Thank you very much!! Hopes for sequels!!!🙌👐
Glad it was helpful!
Brilliant tutorial. Thank Dave!
You're welcome! 💯🚀
Hi Dave🙏
I have been following you from html. Your videos are awesome 👌. I must be lucky to find you. 🙂🙂🙂
Thank you! 💯
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.
love this, this was so help full
Hi Dave!
Thanks for your work!
You're welcome! 🙏
crystal clear. thank you!
Glad it was helpful!
Hi Dave
I just want to say thanks a bunch for your tutorials :)))
You're very welcome! 🙏
Fantastic explanation! I also use the whitesmoke named color a lot!
Thank you, Neil! 🙏 I do like that color 💯
I definitely think you have given the right key to many researching online. This is a super tut👍
I appreciate that! 🙏💯
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.
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: czcams.com/video/EfAl9bwzVZk/video.html
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! :)
Thank you, Mohamed! I have a few more topics to cover including transform and animations. Thank you in advance for the support 🙏🙏
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,
Thank you, Ahmad! 🙏💯
Great teaching skills ! Thanks for sharing! new sub indeed!!
Welcome aboard!
Wow best class it was strange at first but I enjoy it ❤️❤️❤️❤️😊😊
Thank you😊
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 İ think you read my mind i need to study of responsive design nowadays and bumm your video came on me, thank you Dave!
Glad I could help! 🚀
Omg! another amazing video thank you so much Dave I'm from Turkey even I don't have enough english ,I can understoon clearly :)
Happy to help! 💯
i just completed the HTML 4 hours tutorial Including the Projects.
Looking forward to starting this Css tutorial with you.
Great job! I'm still building the CSS playlist, but there is currently 17 lessons and over 6 hours in there. 🚀
Thanks a lot....
Thank you for another lesson!
You're welcome!
I have just done a refresher about web responsiveness and media queries and am happy to go to sleep. Thanks, dave!
Excellent!
the best tutorial i have watched
Thank you!
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?
No the height and width are also inversed.
This is amazing!
Glad I could help!
Outstanding presentation
Thank you! Cheers!
Thank you
Welcome!
Sir how to learn advanced html,css and javascript. Can I learn these from MDN or any other resources
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.
Hi Dave!
can you explain this meta tag because you didn't cover it in your html course
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
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.
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.
@@DaveGrayTeachesCode Makes sense, thanks for answering.
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
min-width: 100vw will allow a width _larger_ than 100vw. width: 100vw will not.
@@DaveGrayTeachesCode ok
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
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
Sweet baby Jesus! I could not, for the life of me, figure out how to center my grid items. Thank you!!
Glad I could help!
Like it most
Thank you, Dharmesh! 💯