Learn how to use Media queries & Container queries

Video Description

A dive into the world of media queries and container queries, covering the basics of how each works, the differences between them, when you might want to use one over the other, and more. A big thanks to Geoff Graham for his help in making this video. https://geoffgraham.me/ 🔗 Links ✅ Practical guide to responsive web design: https://youtu.be/x4u1yp3Msao ✅ MDN on the other media query features: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries#descriptors ✅ Range syntax browser support table: https://caniuse.com/css-media-range-syntax ✅ Container query browser support table: https://caniuse.com/css-container-queries Container query units browser support tables: https://caniuse.com/css-container-query-units ✅ Style query browser support table: https://caniuse.com/css-container-queries-style ⌚ Timestamps 00:00 - Introduction 00:55 - New merch! 01:27 - Media query basics 03:20 - Updating custom properties with media queries 05:00 - Creating ranges 07:35 - The new syntax 10:25 - Media queries are for more than only the size of the viewport 12:07 - Container query basics 15:23 - The difference between media and container queries 19:53 - Naming our containers 22:00 - container shorthand 22:30 - Quick recap 23:05 - Container Query Units 27:00 - Might be worth defining the html element as a container… maybe 28:58 - Style queries 32:50 - Which one should you be using? #css -- Come hang out with other dev's in my Discord Community 💬 https://discord.gg/nTYCvrK Keep up to date with everything I'm up to ✉ https://www.kevinpowell.co/newsletter Come hang out with me live every Monday on Twitch! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome 💖 Support me on Patreon: https://www.patreon.com/kevinpowell --- My editor: VS Code - https://code.visualstudio.com/ --- I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!