Daily challengeStill lockedFinish your first module.

Module 1: First page

Maggie of Cold Comfort still chalks the flavours on a board on the Brighton seafront. Every day, tourists ask whether they can see them online. Time for a first website, and you're the one building it.

  1. 1
    What HTML is
  2. Headings and paragraphs
  3. Nesting and the tree
  4. Emphasis and line breaks
  5. Links
  6. Images
  7. The flavour menuFinal test

Module 2: First style

Gino has been cutting hair on Kirkgate for twenty years. A nephew built the Snip & Curl website, but it looks like a shopping list: black letters on white. "It should look a bit like my salon," says Gino. Time for CSS.

  1. What CSS is
  2. Linking a stylesheet
  3. Colours
  4. Styling text
  5. Class and id
  6. Backgrounds and units
  7. The new price pageFinal test

Module 3: Structure and meaning

Hilary has run The Cosy Basket for thirty years. She made the website herself: one long wall of text with the animals, the opening hours and how to adopt, all mixed up. Visitors can't find a thing, and neither can Google. "Could you bring some order to it?"

  1. Lists
  2. Tables
  3. Blocks with meaning
  4. Div and span
  5. Attributes and valid HTML
  6. A menu for several pages
  7. The open dayFinal test

Module 4: Selectors and the cascade

Frank has been acting with Curtain Up for forty years, and lately he runs the website too. He wrote some CSS himself, but half of it doesn't do what he wants: the dates stay grey, the menu refuses to turn gold. "Why won't the browser listen to me?"

  1. Combining selectors
  2. Picking by attribute
  3. Pseudo-classes
  4. Inheritance
  5. The cascade
  6. Specificity
  7. Opening nightFinal test

Module 5: The box model

Joanne opened The Steep Wall five years ago in an old warehouse. There's not a free spot left on the walls, but on the website everything is squashed together: the prices, the buttons, the news. "It needs room to breathe," she says, "like a good climber."

  1. The box model
  2. Box-sizing
  3. Width, height and overflow
  4. Centring with margin auto
  5. Collapsing margins
  6. Display
  7. The new bouldering roomFinal test

Module 6: Flexbox

Nadia has run the food truck festival on Fore Street for ten years. On the street she knows exactly where every truck stands, but on the website everything sits one under the other, like a queue on the ring road. "Put them in their places," she says, "and preferably without me measuring them every time."

  1. Display flex
  2. Justify-content
  3. Align-items
  4. Flex-direction
  5. Align-self and order
  6. Flex-wrap and gap
  7. Align-content
  8. Flex-grow, flex-shrink and flex-basis
  9. A menu bar and cards in a row
  10. The site planFinal test

Module 7: Grid

Gus took over the campsite from his parents. On the field every pitch sits in a fixed row and column, but on the website they stand one under the other, like a shopping list. "I want a site plan," he says, "like the board at reception."

  1. Display grid
  2. Fr and repeat
  3. Rows and gap
  4. Placing on lines
  5. Areas with a name
  6. Aligning in a cell
  7. Minmax and auto-fit
  8. Grid or flexbox
  9. A whole page layout
  10. The new home pageFinal test

Module 8: Positioning and responsive

Walter, a retired electrician, has been fixing anything with a plug for thirty years. His repair café is packed, but on a phone the website is unreadable, and anyone who wants to sign up still has to phone. "Throwing things away is not allowed," he says, "but a better website is."

  1. Relative and absolute
  2. Sticky, fixed and z-index
  3. Mobile first
  4. Media queries
  5. Images that scale
  6. Forms
  7. Accessible
  8. Custom properties
  9. Transition
  10. Ready for every phoneFinal test

Badges

  • First pageFinished your first HTML and CSS lesson.not earned yet
  • FlawlessA lesson without a single mistake.not earned yet
  • Goal reachedReached your daily goal.not earned yet
  • On a rollPractised 3 days in a row.not earned yet
  • A full weekPractised 7 days in a row.not earned yet
  • Flawless moduleEvery lesson of a module without mistakes.not earned yet
  • ChallengerWon your first daily challenge.not earned yet
  • UnstoppableWon the daily challenge 7 days in a row.not earned yet
  • Final test passedPassed the final test of a module.not earned yet
  • Every final testPassed every final test.not earned yet
  • On the clockFinished your first race against the clock: a speedrun or a puzzle ladder.not earned yet
  • Lightning fastA speedrun or a puzzle ladder within the target time.not earned yet