CSS Mastery

24 lessons covering modern CSS from custom properties and value functions through to scroll-driven animations and capstone project.

Values & Types

1. 1. Custom Properties from the Ground Up
2. 2. @property - Registered Custom Properties
3. 3. CSS Value Functions
4. 4. @function - Custom CSS Functions
5. 5. Advanced attr()

Motion

6. 6. CSS Transitions
7. 7. CSS Animations

Layout

8. 8. Flexbox - How the Algorithm Works
9. 9. CSS Grid - Two-Dimensional Layout
10. 10. Container Queries

The Cascade & Selectors

11. 11. Cascade Layers (@layer)
12. 12. CSS Nesting
13. 13. Modern Selectors
14. 14. The Cascade - Complete Resolution Algorithm

Modern Features

15. 15. Logical Properties
16. 16. View Transitions
17. 17. Anchor Positioning
18. 18. Advanced Colour
19. 19. @scope - Proximity-Based Styling
20. 20. Selectors Deep-Dive
21. 21. Theming Deep-Dive
22. 22. Responsive Design Patterns
23. 23. Scroll-Driven Animations
24. 24. Capstone: Product Landing Page

Reference

• CSS Anatomy - Symbols, Structure & Terminology