A hands-on course

CSS the way
designers think

Not an outdated tutorial from 2015. Modern CSS — the kind that maps directly to how you already work in Figma — taught for designers who are ready to build what they design.

No build tools No frameworks No prior code experience needed

Built for how designers work

Every concept is mapped to something you already understand from design tools. CSS will finally make sense.

Design tokens in CSS

The same way you define styles in Figma, you'll define custom properties in CSS. Change a token — everything updates.

Layout that makes sense

Flexbox and Grid explained through layout problems you already solve every day with frames and auto layout.

Components that respond

Container queries let components respond to their own space — not the viewport. Design system thinking, in CSS.

Real exercises, real output

Every lesson ends with a starter file and a reference solution. You'll ship something that looks designed — not coded.

Modern CSS, not 2010 CSS

This course deliberately skips the patterns you'll find in outdated tutorials.

The old way The modern way
float: left for layout Flexbox & Grid
Repeated colour values everywhere Custom properties (design tokens)
Deep nested selectors CSS Nesting
!important as a crutch Cascade Layers
Media queries on every component Container Queries
JavaScript for parent selection :has()

12 lessons + a bonus activity

Every lesson has a concept guide, a starter exercise, and a complete reference solution.

00

Getting Started

Set up your environment and open your first HTML file in the browser.

01

HTML Foundations

Semantic HTML, document structure, thinking in elements not boxes.

02

CSS Foundations

Selectors, the box model, and the cascade — three concepts that everything else builds on.

03

Custom Properties

Design tokens in CSS. Dark mode, theming, and dynamic values without JavaScript.

04

Flexbox

One-dimensional layout — nav bars, button groups, and anything in a row or column.

05

CSS Grid

Two-dimensional layout — page templates, galleries, and bento-style compositions.

06

Cascade Layers

Take control of specificity wars. No more !important.

07

CSS Nesting

Write CSS the way your brain already organises components — grouped, not scattered.

08

Container Queries

Components that respond to their own container's size, not the viewport.

09

Modern Selectors

:has(), :is(), :where(), and :not() — selectors that replace JavaScript.

10

Animations & Transitions

Motion as a design material — keyframes, stagger, scroll-driven, and reduced motion.

11

Final Project

Build a complete design system component library — tokens, components, and dark mode.

Bonus — HTML Résumé

Build a real, printable résumé using every concept from the course. Something you can actually keep.

Ready to speak the language of the web?

Open lesson 00 and write your first line of CSS. It takes about five minutes to get something on screen.