CSS

Part 1: The basics

What CSS is, how to choose what you are styling, and what happens when two rules disagree.

1. 1CSS from zero45 min · 5 steps

Part 2: Boxes and space

Padding, border and margin, why 100% can overflow, and what to do when content is too big.

1. 2Boxes: space, size and overflow40 min · 4 steps

Part 3: Text

Fonts, sizes and spacing people can read, and styling links and lists properly.

1. 3Text that reads well40 min · 4 steps

Part 4: Layout

Flexbox for a line of things, grid for the shape of a page.

1. 4Flexbox: arranging things in a line45 min · 4 steps
2. 5Grid: laying out a page45 min · 4 steps

Part 5: Responsive

Design for the phone first, scale sizes smoothly, and let components mind their own width.

1. 6Making it work on a phone45 min · 4 steps

Part 6: Position and motion

Badges, sticky bars and layers, then transitions, transforms and knowing when to stop.

1. 7Positioning: badges, sticky bars and layers40 min · 3 steps
2. 8Movement, shadows and depth40 min · 4 steps

Part 7: Polish and structure

Gradients, depth and dark mode, then naming, resets and layers so a stylesheet stays workable.

1. 9Gradients, depth and dark mode40 min · 4 steps
2. 10Keeping CSS under control40 min · 4 steps

Part 8: Projects

Build real things from a brief, with the HTML given and all the CSS yours.

1. 11Project: a pricing section you could ship60 min · 4 steps
2. 12Project: style the whole business site90 min · 5 steps