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