Top 10 Advanced CSS Responsive Design Concepts You Should Know

JavaScript / Web 580.2K צפיות 31/12/2022
פתח ב-YouTube

דרג סרטון זה

התחבר כדי לדרג

תיאור

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

#Web Dev Simplified