CSS Mastery: Architecture, Specificity, Animation & Modern CSS
Score specificity, sort the cascade with layers, build fluid and container-based sizing, decode stacking contexts and time animations frame by frame, with every answer checked as you go.
- One-time payment
- Instant access right after payment
- Secure checkout with Stripe
About this course
This advanced CSS course turns the rules that usually cause bugs into numbers you can check. In 20 hands-on labs you score selectors as (A, B, C) tuples, rebuild the cascade sort with origins, inline styles and cascade layers, and measure specificity debt with a specificity graph. You derive fluid clamp() values, size components with container queries and cqi units, resolve :has() quantity queries, native nesting and stacking contexts, and time animations frame by frame with steps(), linear() and the frame budget. You also mix colours with color-mix() and finish with a full design-system component audit. The first lesson is free.
Lessons
- Specificity as (A, B, C): Score and Rank Any SelectorFree
- :is(), :not(), :has() and :where(): Specificity of Pseudo-Class Functions Locked
- The Cascade in Order: Origin, Importance, Inline Styles, Specificity Locked
- Cascade Layers: Layer Order, Unlayered Styles and the !important Flip Locked
- The Specificity Graph: Measure Specificity Debt in a Stylesheet Locked
- Inheritance and Computed Values: em Compounding and the line-height Trap Locked
- Custom Properties as Design Tokens: Chained Scales and Invalid Values Locked
- Fluid Typography with clamp(): Slope, Intercept and the Clamped Range Locked
- Container Queries and cqi Units: Size Components by Their Slot Locked
- :has() in Practice: Quantity Queries and Sibling Conditions Locked
- Native CSS Nesting: How & Desugars and Inflates Specificity Locked
- Stacking Contexts: Why z-index: 9999 Still Loses Locked
- CSS Performance: Coverage, Transfer Size and the Critical CSS Budget Locked
- The Animation Timing Model: Delay, Iterations and Direction Locked
- steps() and linear(): Exact Output of Stepped and Custom Easing Locked
- Animation Performance: Layout, Paint, Composite and the Frame Budget Locked
- Staggered Motion with Custom Properties, Caps and Reduced Motion Locked
- color-mix() for Tints and Shades: Channel Maths and Normalised Percentages Locked
- aspect-ratio and object-fit: Box Sizes, Cover Scale and Cropping Locked
- Capstone: Audit a Design-System Button from Cascade to Motion Locked