Ninety courses. Six benches.

Margin, border, padding, and display, taught by drawing the boxes the browser is already drawing. You will stop adding wrappers to fix a gap you cannot name.

• Explain how margin, border, and padding add up
• Choose between block, inline, and inline-block
• Fix a collapsed margin without another wrapper

Specificity, inheritance, and the cascade, practiced on a stylesheet that has already gone wrong. You will learn to win a conflict by simplifying it.

• Predict which rule wins and say why
• Write a selector that does not depend on a long chain
• Reset a property without !important

Before this: The Box, on Purpose

A row, a stack, a toolbar, and the case where flex starts fighting you. You will know when to stop and reach for grid instead.

• Build a row that wraps without a media-query hack
• Align items on the cross axis on purpose
• Explain when flex is the wrong tool

Before this: The Box, on Purpose

Named areas, placement, and a breakpoint that changes the page without rewriting the markup. You will build a layout you could hand to a writer.

• Draw a page as named grid areas
• Place an item without absolute positioning
• Change the grid at a breakpoint without rewriting markup

Before this: Flow, Flex, and When Flex Fails

A display face and a text face, a measure that stays comfortable, and a scale small enough to remember. You will stop picking font sizes by eye.

• Set a measure that stays readable
• Build a type scale with a handful of sizes
• Pair a display face and a text face

Before this: The Box, on Purpose

Roles instead of hex values, and states that do not rely on color alone. You will check pairs against WCAG rather than against your monitor.

• Check a pair against WCAG contrast
• Design hover and focus without relying on color alone
• Name colors as roles, not as hex values

Before this: Type on a Screen

Every control gets a name, every error sits next to its field, and the form works from the keyboard. Advanced, because the details are where forms fail.

• Associate every control with a visible label
• Show an error next to the field it belongs to
• Complete the form from the keyboard alone

Before this: Selectors that Hold

You will choose breakpoints from the content, and use a container query where a viewport query is the wrong question.

• Choose a breakpoint from the content, not a device list
• Use a container query where a viewport query is wrong
• Let spacing scale without a pile of overrides

Before this: Grid for Pages, Not Demos

Animate a property that does not force layout, and honor prefers-reduced-motion as a requirement rather than a nicety.

• Animate a property that does not force layout
• Honor prefers-reduced-motion
• Use motion to show where something went

Before this: Color, Contrast, and States

You will give controls names a screen reader can announce, keep focus in visual order, and build a skip link that lands. Advanced, and it is the difference between a page that looks done and one that is.

• Give a control a name a screen reader can announce
• Keep focus order the same as visual order
• Build a skip link that actually lands

Before this: Forms People Can Finish

A theme as custom properties on a root, an override in one subtree, and a clear line between a variable and a preprocessor constant.

• Model a theme as custom properties on a root
• Override a token in one subtree
• Explain how a variable differs from a preprocessor constant

Before this: Color, Contrast, and States

Cascade layers, a naming scheme that does not explode, and a third-party widget that no longer restyles your page.

• Scope a component's CSS so it cannot leak
• Use a cascade layer to settle third-party styles
• Name a variant without a combinatorial class list

Before this: Selectors that Hold

You will be handed broken layouts and asked to name the winning rule before you change anything. Guessing is the habit this course is trying to retire.

• Find which rule is winning from the cascade panel
• Measure a box instead of guessing the gap
• Spot an overflow before it becomes a horizontal scroll

Before this: Grid for Pages, Not Demos

An empty state that says what to do, an error that names the failure, and a busy state that does not freeze the page. Twelve weeks, because these are product decisions as much as CSS.

• Design an empty state that tells the person what to do
• Write an error that names the failure and the next step
• Show progress without blocking the whole page

Before this: Forms People Can Finish

You choose the page. We hold the line on keyboard access, contrast, type, and a layout that works on a phone and a wide screen. You leave with notes another person could build from.

• Ship a page that works on a phone and a wide screen
• Pass a keyboard and contrast pass you run yourself
• Write notes another developer can build from

Before this: Names, Focus, and the Keyboard