Course · Layout & CSS

CSS From Scratch

Tokens, layout and type — the whole system, built in front of you. Fifteen lessons, two hours, and a stylesheet at the end that you could hand to somebody else.

14lessons
2h 06mof video
4modules
Freein full

What you will be able to do

Six of them, and the course is judged against these rather than against its running time.

Read a design system as two tiers of tokens rather than a pile of classesBuild a layout with four grid properties instead of a frameworkSet a type scale you can defend in a reviewRation one accent colour so it still means something on page fortyShip motion that is honest under prefers-reduced-motionWrite CSS a second person can delete without asking you

The curriculum

Four modules with a first and a last. This is the series route, so it gets a spine — the order is the information.

The curriculum 4 modules · 14 lessons · 2h 06m
Your progress5 of 14
01Foundations4/4
  1. What a design system actually is6:12
  2. Two tiers of tokens11:40
  3. One colour, rationed9:05
  4. The type scale12:20
02Layout1/4
  1. The container and the gutter8:44
  2. Grid, in four rules14:02
  3. Flex, and when not to reach for itFree10:18
  4. The rail, the stack and the cluster9:36
03Type & rhythm0/3
  1. Measure and leading7:50
  2. Headings that scale with the pagePreview8:12
  3. Long-form content11:26
04Shipping0/3
  1. The build step you may not needPreview6:40
  2. Writing a changelog5:55
  3. What to do after this4:10

When you finish

CSS From Scratch

A page with your name on it and the date you finished. Useful for a manager, and honest about being exactly that.

14 lessons · 2h 06m · issued on completion

Questions

Do I need to know CSS already?

For this one, no. It starts at what a token is. The layout and motion courses assume you have written a stylesheet before.

How long do I have access?

Once you have a course, you have it. There is no renewal, because a renewal would make the course a subscription wearing a price tag.

Is there a certificate?

Yes, at the end of each course. It is a page with your name on it — useful for a manager, and honest about being exactly that.

What if it is not for me?

Thirty days, no questions, no form asking why. Email and it is done.

Start · Lesson 01 What a design system actually is Six minutes, and nothing to install first.