Course · Advanced
Advanced CSS
Learn the CSS that powers real dApp interfaces: two-dimensional layouts, design tokens with custom properties, performant motion, and components that respond to their container instead of the viewport.
0 of 4 lessons complete
What you will build
A dashboard layout, a themeable component library with dark mode, motion-safe animations, and cards that adapt to whatever slot they are placed in.
Prerequisites
- The CSS foundations course: selectors, the box model, basic Flexbox and Grid.
Lessons
- 01Grid and Flexbox LayoutsWhen to use Grid vs Flexbox, named areas, auto-fit with minmax, alignment, and combining both.2 min
- 02Custom Properties and ThemingCSS variables, inheritance and the cascade, design tokens, dark mode, and changing variables from JavaScript.2 min
- 03Animations and TransitionsTransitions vs keyframes, timing functions, composited properties for 60fps, and respecting reduced motion.3 min
- 04Responsive Design and Container QueriesMobile-first media queries, fluid type with clamp(), container queries, and modern viewport units.2 min