Responsive design in CSS is difficult to do well, especially if you only ever use media queries. In this video I share my top 10 responsive design tips that go beyond just using simple media queries.
📚 Materials/References:
PostCSS Video: https://youtu.be/Kn2SKUOaoT4
CSS Grid Video: https://youtu.be/9zBsdzdE4sM
Viewport Units Video: https://youtu.be/5m6JOJLy5B0
Viewport Units Article: https://blog.webdevsimplified.com/2022-08/css-viewport-units
🌎 Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 – Introduction
00:39 – Viewport Meta Tag
02:06 – Media Query Orientation
03:15 – Media Query Aspect Ratios
04:00 – Media Query Ranges
05:25 – Container Queries
09:27 – Custom Media Queries
11:09 – Different HTML
12:20 – CSS Grid
16:15 – Clamp
18:00 – Viewport Units
#ResponsiveDesign #WDS #CSS
source
🎯 Key Takeaways for quick navigation:
Made with HARPA AI
4:50 but is it supported on Safari though
Every video of yours is on another level. hats off to you bro..
All your videos are so nice
Your advice on duplicated html should 100% include information in the caveats of duplicated content, like how it affects screen readers, honestly, I'd just avoid such advice and it's very nuanced.
Samsung browser not support 😑
Really awesome approach. I will use it when the support is there for it!
I like his voice ☺️☺️☺️☺️
Thank you for the video!!! We learn a lot with you! Thank you!
Bro please create a responsive website I Love Your Teaching
I LOVE YOUR WAY OF EXPLANATION
Would clamping using the 3vw allow the zoom to work?
what's the add-on giving the pixels sizes in dev tools ?
Great vid
The video i really want to find. But not sure how to search. Now youtube recommended. 😂
Thank you for including the bit about the meta tag, nobody else seems to mention that and it wasn't working for me until I put that in !!
Thanks for the vid. When writing stylesheets SASS is still king when it comes to simplifying css. @container is something I've prayed for for years.
This dude is a champ.
if we use @media (width>=300px) {…rest} some of the apple device doesn't support this type of media queries
Gwid is great
Your content is teaching me a lot, on point and well done. I do want to mention that although you later added a note to correct the "siderbar" typo, your tutorial was displaying the red and purple boxes incorrectly. I wrestled with this and could not figure it out until I walked away and later it came to me that your display wasn't matching mine because I didn't have the "siderbar" typo. Without the "siderbar" typo, only the red box displays over 600px because it is in a separate div on the html page. Thanks…; )
İs not easer with bootstrap?
Is that a Jackson Dinky back there? I like your style; one of the most prolific metal strats, juxtaposition to a family throw pillow. 🤘
ohh, clamp is fr cool thing
You are really awesome man , keep going
Thank you!!! Just Amazing and so helpful!!!!
Very rushed and dated vid
Tailwind it
Just found this video. The grid is exactly what I needed! 👍
useful
Can the @custom-media be defined outside of the css file but still apply to it? Juste like css variables.