gwecode

courses / css / level 2

level 2 · medium

intermediate
css.

Build layouts that work on every screen: flexbox, grid, media queries, positioning, smarter selectors and smooth transitions.

  • 28 lessons
  • 7 units
  • 4 h 12 m in all
  • £0, for good
start level 2

what’s inside.

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

CSS Level 2 picks up where Level 1 ends. In 28 lessons you master flexbox and grid, make pages fit any screen, pin boxes in place, target elements by position and state, and polish everything with transitions and fitted pictures. It ends with a level check: a responsive recipe board you build yourself.

every lesson goes the same way.

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

unit 1

Flex in depth

Make rows and columns that bend to fit the space they get.

4 lessons · 34 min

  1. Rows or columns8 minTurn a flex row into a column and know which way is which.
  2. Wrapping onto new lines8 minLet a full row of boxes spill onto a new line.
  3. Sharing out spare room8 minLet flex children grow to fill the empty space in a row.
  4. Starting size and squeezing10 minSet where each child starts, stop it squashing, and use the flex shorthand.

unit 2

Line it up

Place each flex child exactly where you want it, on any screen.

4 lessons · 35 min

  1. More ways to spread out8 minPush flex children to the far end or spread them evenly.
  2. Stretch on the cross axis8 minSee why flex children stretch, and stop them when you need to.
  3. One child its own way9 minMove a single flex child with align-self or an auto margin.
  4. Cards that wrap and fill10 minBuild a row of cards that rearranges itself on any screen.

unit 3

Grids

Lay boxes out in rows and columns at the same time.

4 lessons · 36 min

  1. Your first grid8 minTurn a box into a grid and choose its columns.
  2. Fractions of the room9 minShare a grid's width with fr and repeat columns with repeat().
  3. Spanning cells9 minMake one child cover several columns or rows.
  4. Naming areas10 minDraw a page layout in words, then drop each part into place.

unit 4

Fit any screen

Make one page look right on a small phone and on a wide screen.

4 lessons · 39 min

  1. Media queries10 minChange the layout once the screen is wide enough.
  2. Units that follow the screen9 minSize things by the screen with vw and vh, or by the text with em.
  3. Sizes with limits10 minLet sizes stretch with the screen, but never too far.
  4. Grids that fit themselves10 minLet a grid choose its own number of columns, with no media query.

unit 5

Position anything

Lift boxes out of the flow and pin them exactly in place.

4 lessons · 35 min

  1. Nudging with relative8 minShift a box from its normal spot without moving anything else.
  2. Absolute inside a parent10 minPin a badge to the corner of a card.
  3. Sticky headers8 minKeep a header in view while the page scrolls under it.
  4. Fixed and on top9 minPin a button to the screen and choose what sits in front.

unit 6

Smarter selectors

Target exactly the elements you mean, wherever they sit and whatever state they are in.

4 lessons · 36 min

  1. Inside and directly inside9 minStyle elements by where they sit, using a space or >.
  2. Counting children9 minStyle the first, the last or every other child, with no extra classes.
  3. Showing where the keyboard is9 minGive keyboard users a clear focus ring with :focus-visible.
  4. Decorations with ::before and ::after9 minAdd little extras to the page with CSS alone.

unit 7

Finishing touches

Smooth changes, neat pictures and a full layout for every screen.

4 lessons · 37 min

  1. Smooth changes8 minFade between two looks instead of snapping from one to the other.
  2. Speed curves and waiting9 minChoose how a transition speeds up, and when it starts.
  3. Pictures that fit8 minFill a frame with any picture without squashing it.
  4. Putting it all together12 minBuild a responsive card layout from everything in this level.
end of level 2 level check: a responsive recipe board Build one small project with everything from this level. Pass it and your face levels up. see the check

next, level 3

advanced
css.

Write CSS like a professional: tokens, cascade layers, `:has()`, modern layout, motion and accessible design systems.

see level 3