CSS Mastery

25 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
8. 8. 3D Transforms - The Z-Axis

Layout

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

The Cascade & Selectors

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

Modern Features

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

Reference

• CSS Anatomy - Symbols, Structure & Terminology