Courses
HTML and CSS Advanced: Styles That Hold Up in Production
Check Yourself: Layout Systems for Real Sites
Five scenario questions on subgrid, grid tracks and container queries. If you miss more than one, go back to the lessons before moving on.
Course content
Join this Course
Sign in to save your progress.
-
Architecture That Scales
-
Modern CSS Without a Framework Crutch
-
Cascade Layers and Specificity You Control
-
-
-
Layout Systems for Real Sites
-
Complex Grids and Nested Layout Patterns
-
Container Queries When the Component Is the Breakpoint
-
-
-
Motion and Interaction Done Right
-
Transitions and Animations That Don't Annoy People
-
prefers-reduced-motion and Respecting the User
-
-
-
Performance and Delivery
-
Critical CSS and What Blocks First Paint
-
Font Loading Without Layout Jump
-
Responsive Images: srcset, sizes and Lazy Load
-
-
-
Ship and Maintain
-
Design Tokens and Theming Without Duplicating Everything
-
CSS That Survives a Redesign
-
Audit Accessibility and Visual Regressions Before Launch
-
-
- Final Check: HTML and CSS Advanced
1.
A card list has titles of different lengths, and the price and button in each card must line up across the row. Which approach fits?
2.
A grid track is 1fr and a long URL in the content makes the page scroll sideways. What is the safer track definition?
3.
You set grid-row: span 3 on each card but the title, price and button still do not align across cards. What is missing?
4.
The same product card sits in a wide main column and a narrow sidebar on a 1000px window. What is the right tool for its layout change?
5.
You write .slot { container-type: inline-size; } and @container (min-width: 30rem) { .slot { background: #eef; } }. The background never changes. Why?
About
Five scenario questions on subgrid, grid tracks and container queries. If you miss more than one, go back to the lessons before moving on.
- Duration
- 5 min
- Last update
- 08/01/2026
Was this helpful?
0
0
Comments (0)
Sign in to commentNo comments yet.