Collection · Course

The learning sections, on their own

What course added to the shared vocabulary, plus the four things that are genuinely its own. Everything with a col- prefix below is now available to every collection; the crs- ones are course's, until a second collection wants them.

col-resume

The strip for someone who has been here before. It outranks the hero's call to action, because “carry on” beats “start” for everyone it applies to, and is invisible to everyone it does not.

Continue · CSS From Scratch Grid, in four rules Layout · lesson 6 of 14 · 5 watched Resume

col-stagebar

Under a player: where you are, and the two ways out. Previous and next are the entire navigation of an ordered collection, so they get the width.

← Previous
Lesson 1 of 15Foundations6:12

What a design system actually is

Next →

col-playlist

The syllabus, beside a player. It is .curriculum — the same modules, the same lesson rows, the same tick. All this modifier adds is a body that scrolls, because it now sits next to a video instead of running the width of a page.

CSS From Scratch 5 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
36% complete 2h 06m total

col-transcript

Timestamps down the left, so the column of times is scannable and the line the player is on can be marked without the text moving.

0:00A grid is not a layout system you switch on. It is four properties, and everything else in the specification is a shorthand for them.0:24The first is grid-template-columns. Nearly every layout you ship is this one property with minmax in it.0:51The second is gap — and gap is the reason margins mostly leave your stylesheet when grid arrives.1:19Third: the implicit grid. Rows you never declared. This is where most of the confusion lives, so we are going to sit here a while.

col-checks

What you will be able to do afterwards. A promise reads as a promise in a list and as marketing in a paragraph.

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 forty

col-offer

The one card on the page that is asking for something, so it is the one that carries the accent.

Enrol
Free $49
14 lessons, 2h 06mStarter files for every lessonCertificate at the endYours once you have it
Start lesson one

Thirty days, no questions. The refund form does not ask why.

col-files

What comes with the thing. Rows, because a download is an action and actions read as a list.

zipStarter filesThe stylesheet at the state this lesson begins18 KBpdfGrid cheatsheetOne page, the four properties96 KBcssThe finished stylesheetWhat we end on, commented4 KB

col-keys

A player has shortcuts whether or not it advertises them. Advertising them is cheaper than a help page.

Shortcuts
Next lessonNPrevious lessonPMark completeM
They do nothing while you are typing

crs-level

Three bars, one to three lit. The word "intermediate" means nothing until you have seen the other two; three bars are comparable at a glance across a grid, which is where difficulty is actually read.

BeginnerIntermediateAdvanced

crs-quiz

Native radios inside labels, so the keyboard, the grouping and the announcement all come free. The only thing added is what a chosen answer looks like.

Which property creates the rows you never declared?

crs-cert

Deliberately quiet: a hairline double border and one line of accent. A certificate that shouts is a certificate nobody believes.

CSS From Scratch14 lessons · issued on completion

← Back to /course Open the lesson player →