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
@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!
@TEZO_EDITS Жыл бұрын
love this, this was so help full
@hadibq Жыл бұрын
Great teaching skills ! Thanks for sharing! new sub indeed!!
@DaveGrayTeachesCode Жыл бұрын
Welcome aboard!
@Manny.Angulo2 жыл бұрын
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.
@DaveGrayTeachesCode2 жыл бұрын
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
@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.
@SmilingCherryBlossoms-ez8od12 күн бұрын
This is a very good teacher...he explains to you like you didn't know anything. That's how yo do it!
@MichaelEhiogu18 сағат бұрын
Great tutorials Dav. In all your code tutorials.
@powerfulspirit92422 жыл бұрын
Hi Dave🙏 I have been following you from html. Your videos are awesome 👌. I must be lucky to find you. 🙂🙂🙂
@DaveGrayTeachesCode2 жыл бұрын
Thank you! 💯
@kaurmanjot Жыл бұрын
Thank you so much Dave for this amazing video 😊
@obeng-yeboahk.d1914 Жыл бұрын
I never understood media queries until now.. thanks Dave
@verydifferentthought2 жыл бұрын
u are very good teacher, i am literally watching this from Uzbekistan :)!
@DaveGrayTeachesCode2 жыл бұрын
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!
@hiwayshoes2 жыл бұрын
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 💖!
@DaveGrayTeachesCode2 жыл бұрын
Thank you for the kind words, and glad I could help! 🙏💯
@dzutest53432 жыл бұрын
makes two of us
@olamilekanolajide1622 Жыл бұрын
Thank you😊
@DaveGrayTeachesCode Жыл бұрын
You're welcome 😊
@umutpiynarr Жыл бұрын
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.
@umutpiynarr Жыл бұрын
@@DaveGrayTeachesCode Makes sense, thanks for answering.
@mischief94999 ай бұрын
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
@DaveGrayTeachesCode9 ай бұрын
min-width: 100vw will allow a width _larger_ than 100vw. width: 100vw will not.
@mischief94999 ай бұрын
@@DaveGrayTeachesCode ok
@nextlevelMiracle452 жыл бұрын
Brilliant tutorial. Thank Dave!
@DaveGrayTeachesCode2 жыл бұрын
You're welcome! 💯🚀
@harold.machado2 ай бұрын
Thanks a lot....
@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. :)
@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.
@balogunadetunji5463 ай бұрын
Wow best class it was strange at first but I enjoy it ❤️❤️❤️❤️😊😊
@Techvideos-q7uАй бұрын
Gray your outro is always so heart whelming 🙏
@AdamChou-mu3ow6 ай бұрын
What a beginner-savior(babysitter-level) content!!🤩It covers all I needed!!! 😭Thank you very much!! Hopes for sequels!!!🙌👐
@DaveGrayTeachesCode6 ай бұрын
Glad it was helpful!
@abdomahmoud87692 жыл бұрын
Hi Dave! can you explain this meta tag because you didn't cover it in your html course
@DaveGrayTeachesCode2 жыл бұрын
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
@CTILET2 жыл бұрын
Hi Dave! Thanks for your work!
@DaveGrayTeachesCode2 жыл бұрын
You're welcome! 🙏
@yucelbengu13072 жыл бұрын
Omg! another amazing video thank you so much Dave I'm from Turkey even I don't have enough english ,I can understoon clearly :)
@DaveGrayTeachesCode2 жыл бұрын
Happy to help! 💯
@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!
@tabarna23642 жыл бұрын
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
@DaveGrayTeachesCode2 жыл бұрын
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
@championsleague26962 жыл бұрын
i just completed the HTML 4 hours tutorial Including the Projects. Looking forward to starting this Css tutorial with you.
@DaveGrayTeachesCode2 жыл бұрын
Great job! I'm still building the CSS playlist, but there is currently 17 lessons and over 6 hours in there. 🚀
@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.
@ahmad-murery2 жыл бұрын
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,
@DaveGrayTeachesCode2 жыл бұрын
Thank you, Ahmad! 🙏💯
@kevink3072 Жыл бұрын
I have just done a refresher about web responsiveness and media queries and am happy to go to sleep. Thanks, dave!
@DaveGrayTeachesCode Жыл бұрын
Excellent!
@edithsylvester1311 Жыл бұрын
crystal clear. thank you!
@DaveGrayTeachesCode Жыл бұрын
Glad it was helpful!
@sumeyyea2 жыл бұрын
omg İ think you read my mind i need to study of responsive design nowadays and bumm your video came on me, thank you Dave!
@DaveGrayTeachesCode2 жыл бұрын
Glad I could help! 🚀
@esraamohamed56012 жыл бұрын
Thank you
@DaveGrayTeachesCode2 жыл бұрын
Welcome!
@dzutest53432 жыл бұрын
I definitely think you have given the right key to many researching online. This is a super tut👍
@DaveGrayTeachesCode2 жыл бұрын
I appreciate that! 🙏💯
@adamovtimur982 жыл бұрын
Hi Dave I just want to say thanks a bunch for your tutorials :)))
@DaveGrayTeachesCode2 жыл бұрын
You're very welcome! 🙏
@mohamedabdelrazig69202 жыл бұрын
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! :)
@DaveGrayTeachesCode2 жыл бұрын
Thank you, Mohamed! I have a few more topics to cover including transform and animations. Thank you in advance for the support 🙏🙏
@101stDay2 жыл бұрын
Fantastic explanation! I also use the whitesmoke named color a lot!