- How browsers consume CSS
- Syntax and terminology
- Basics of colors, units, typography
Module 1 Rendering Logic I
- Inheritance and the cascade
- The Box Model in depth
- The need-to-know quirks about Flow layout
Module 2 Rendering Logic II
- Understanding relative, absolute, fixed, and sticky positions
- Avoiding the z-index wars
- Managing overflow, hidden content
Module 3 Modern Component Architecture
- Using tooling to solve specificity challenges without naming conventions
- How to build a component library from scratch
- How to use CSS-in-JS effectively
Module 4 Flexbox
- Understanding grow, shrink, and basis
- A dozen common layouts with Flexbox
- Responsiveness without media queries
Module 5 Responsive and Functional CSS
- Building amazing mobile/tablet experiences
- Dynamic CSS with vw/vh, calc, min/max/clamp…
- The awesome power of CSS Variables
Module 6 Typography and Images
- Responsive image optimization
- Web font best practices
- Variable fonts and the future of typography
Module 7 CSS Grid
- When to use CSS Grid vs. Flexbox
- Understanding the layout algorithm at a deep level
- How to provide fallbacks for older browsers
Module 8 Animation and Interaction
- Transition and animations from first principles
- How to design animations
- Animation performance
Module 9 Little Big Details
- Aesthetics with gradients, box-shadows, clipping, and filters
- Optimizing the usability around scrolling / focus
