Dive into the world of media queries and container queries in this 35-minute video tutorial. Explore the basics of how each works, their differences, and when to use one over the other. Learn to update custom properties with media queries, create ranges, and understand the new syntax. Discover that media queries extend beyond viewport size and delve into container query fundamentals. Understand naming containers, using container shorthand, and working with Container Query Units. Investigate style queries and determine which approach suits your needs best. Gain practical insights to enhance your responsive web design skills and create more flexible, adaptive layouts.
Overview
Syllabus
- Introduction
- New merch!
- Media query basics
- Updating custom properties with media queries
- Creating ranges
- The new syntax
- Media queries are for more than only the size of the viewport
- Container query basics
- The difference between media and container queries
- Naming our containers
- container shorthand
- Quick recap
- Container Query Units
- Might be worth defining the html element as a container… maybe
- Style queries
- Which one should you be using?
Taught by
Kevin Powell
