Modern CSS Mastery
Write CSS you can predict: the cascade, modern layout, color and motion, explained from the browser's side.
- 4.7 (1,052 ratings)
- 9,300 learners
- Intermediate
- 5h 50m total
- Updated June 2026
What you’ll learn
- Predict which declaration wins, and control it with @layer
- Build components with custom properties, nesting and :has()
- Lay out pages with flexbox, grid, subgrid and intrinsic sizing
- Make components respond to their container, not the viewport
- Ship fluid, RTL-ready, accessible themes with oklch() and light-dark()
- Animate with view transitions and scroll timelines, cheaply and kindly
Who it’s for
Most CSS frustration comes from guessing. This course replaces guessing with the rules the browser actually follows: how the cascade picks a winner, why a flex item refuses to shrink, what a container query measures, and which animations cost a frame. You learn the 2026 toolkit (layers, nesting, :has(), subgrid, container queries, oklch(), view transitions) and when each one earns its place.
You refine one real page the whole way through: the schedule for Waypoint Conf 2026, with session cards, a speaker grid, track filters, right-to-left support and a dark mode. Almost every lesson ends with a hands-on exercise checked in a real browser, and every support claim is matched against Baseline so you know what you can ship today.
- Who it’s for
- Developers who already write CSS every week and want to stop fighting it, from career switchers to juniors filling gaps.
- Before you start
- Comfortable with HTML and basic CSS (selectors, the box model, flexbox basics) and able to read a little JavaScript.
Hands-on practice
- Edit HTML, CSS and JavaScript and see the result instantly.
Course content
4 sections · 20 lessons · 5h 50m total
- How the Browser Picks a Winner14 min
- Specificity, :is() and :where()17 min
- Cascade Layers with @layer18 min
- Custom Properties and @property18 min
- Native Nesting and :has()18 min
- Section checkpoint5 questions
- Flexbox in Depth18 min
- Grid: Areas, auto-fit and minmax()18 min
- Subgrid for Aligned Cards17 min
- Intrinsic Sizing: min(), max(), clamp()17 min
- Container Queries20 min
- Section checkpoint5 questions
- Fluid Type and Space17 min
- Logical Properties and RTL17 min
- Modern Color: oklch() and color-mix()19 min
- Light and Dark with light-dark()17 min
- Focus Styles That Work15 min
- Section checkpoint5 questions
- Transitions, Keyframes and Reduced Motion18 min
- View Transitions18 min
- Scroll-Driven Animations17 min
- CSS Architecture at Scale19 min
- Rendering Performance18 min
- Section checkpoint5 questions
Your instructor
Sofia Reyes
Principal Product Designer · Northwind
- 4.8 instructor rating
- 25,900 learners
- 3 courses
Sofia trained as a graphic designer, taught herself CSS to stop arguing with engineers about pixels, and has worked on both sides of the handoff ever since. At Northwind she leads the design system behind 11 products, from the Figma library to the CSS tokens that ship in code.
What learners say
4.7
1,052 ratings
Lucas Moreau
8 months ago
Cascade layers were the missing piece for me. I moved our reset, vendor styles and components into @layer and stopped writing !important almost overnight.
Nour Hamdan
4 months ago
The logical properties lesson is the first CSS material I've seen that treats right-to-left as normal, not an afterthought. Our Arabic layout now flips with a single dir attribute.
Ana Ribeiro
3 weeks ago
Container queries and subgrid finally make sense, and the conference schedule page is a good project to keep refining. I wanted more time on scroll-driven animations; that lesson feels rushed.