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