courses / css

learn css

Three levels, from never written code to writing it like a professional. Style and layout for the web.

build things that are actually useful.

For people who finished Level 1, or can already write small programs with variables, decisions, loops and functions.

1 unit 1 Flex in depth Make rows and columns that bend to fit the space they get. 0 of 4 · 34 min
  1. Rows or columns8 min
  2. Wrapping onto new lines8 min
  3. Sharing out spare room8 min
  4. Starting size and squeezing10 min
2 unit 2 Line it up Place each flex child exactly where you want it, on any screen. 0 of 4 · 35 min
  1. More ways to spread out8 min
  2. Stretch on the cross axis8 min
  3. One child its own way9 min
  4. Cards that wrap and fill10 min
3 unit 3 Grids Lay boxes out in rows and columns at the same time. 0 of 4 · 36 min
  1. Your first grid8 min
  2. Fractions of the room9 min
  3. Spanning cells9 min
  4. Naming areas10 min
4 unit 4 Fit any screen Make one page look right on a small phone and on a wide screen. 0 of 4 · 39 min
  1. Media queries10 min
  2. Units that follow the screen9 min
  3. Sizes with limits10 min
  4. Grids that fit themselves10 min
5 unit 5 Position anything Lift boxes out of the flow and pin them exactly in place. 0 of 4 · 35 min
  1. Nudging with relative8 min
  2. Absolute inside a parent10 min
  3. Sticky headers8 min
  4. Fixed and on top9 min
6 unit 6 Smarter selectors Target exactly the elements you mean, wherever they sit and whatever state they are in. 0 of 4 · 36 min
  1. Inside and directly inside9 min
  2. Counting children9 min
  3. Showing where the keyboard is9 min
  4. Decorations with ::before and ::after9 min
7 unit 7 Finishing touches Smooth changes, neat pictures and a full layout for every screen. 0 of 4 · 37 min
  1. Smooth changes8 min
  2. Speed curves and waiting9 min
  3. Pictures that fit8 min
  4. Putting it all together12 min
end of level 2 level check Build one small project with everything from this level. Pass it and your face levels up. see the check