gwecode

courses / css / level 1

level 1 · easy

css for
beginners.

From zero to styling your own pages. Every new word explained, every example rendered, one idea per lesson.

  • 28 lessons
  • 7 units
  • 3 h 26 m in all
  • £0, for good
start level 1

what’s inside.

For people who have never written a line of code. Nothing is assumed: every new word is explained the moment it appears.

CSS Level 1 assumes nothing, not even HTML. In 28 short lessons you go from what a web page is to colours, fonts, boxes, flexbox and hover, with a guess, a hands-on task and a fix-the-bug challenge in every lesson. It ends with a level check: a profile card you style yourself.

every lesson goes the same way.

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

unit 1

Meet the page

See what a web page is made of and change how it looks.

4 lessons · 26 min

  1. What a web page is5 minFind out what a web page is made of and change its look.
  2. Tags, classes and ids7 minRead the HTML that holds a page's content.
  3. Your first rule7 minRead and write a complete piece of CSS.
  4. Colours by name7 minPaint text and backgrounds with over a hundred colour names.

unit 2

Colours and clues

Mix exact colours and track down silent mistakes.

4 lessons · 31 min

  1. Hex colours8 minMix any colour you like from red, green and blue.
  2. The browser skips what it cannot read8 minFind the silent mistakes that stop your CSS working.
  3. Lost semicolons and curly brackets8 minTrack down the tiny marks that break more than one line.
  4. The last word wins7 minWork out which rule wins when two of them disagree.

unit 3

Style the words

Change the size, shape and spacing of text.

4 lessons · 28 min

  1. Bigger and smaller text7 minMake any text as big or as small as you like.
  2. Choosing a font7 minPick the shape of your letters, with a safe plan B.
  3. Bold and lined up7 minMake text heavy or light, and line it up.
  4. Room between lines7 minSpace out long text so it is a pleasure to read.

unit 4

Pick your targets

Choose exactly which parts of the page to style.

4 lessons · 30 min

  1. Every tag at once7 minStyle the whole page in one go, or several tags at once.
  2. Select by class8 minStyle a whole group of elements by their class.
  3. Select by id7 minStyle one special element by its id.
  4. Which rule wins8 minPredict the winner when a tag, a class and an id disagree.

unit 5

Space it out

Measure things and give every box room to breathe.

4 lessons · 30 min

  1. Units8 minMeasure sizes in px, rem and %.
  2. Every element is a box8 minSee the box round every element and add room inside it.
  3. Borders7 minDraw solid, dashed or dotted lines round your boxes.
  4. Margins7 minPush boxes apart with space on the outside.

unit 6

Shape the box

Control how wide, tall and round your boxes are.

4 lessons · 29 min

  1. Width and height7 minSet exactly how big a box or a picture is.
  2. Stretchy but not too wide8 minLet boxes fit any screen, then centre them.
  3. Round corners6 minSoften sharp corners and turn squares into circles.
  4. Block and inline8 minKnow why some boxes stack up and others sit in a line.

unit 7

Lay it out

Put boxes side by side and make the page react.

4 lessons · 32 min

  1. Side by side with flex8 minLine boxes up in a row with space between them.
  2. Line them up8 minCentre flex children or spread them out.
  3. Reacting to the pointer7 minChange the look of things while the pointer is over them.
  4. Putting it all together9 minStyle a small page with colour, text, boxes, flex and hover.
end of level 1 level check: a profile card Build one small project with everything from this level. Pass it and your face levels up. see the check

next, level 2

intermediate
css.

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

see level 2