Courses

One small idea a week. Each week has a live lesson, a practice task, a marked assignment and a bonus challenge.

CSS

  1. Week 1
    HTML check-up and your first CSS
    Refresh the HTML you learned last year, then use CSS to change how a page looks: colours, sizes and backgrounds.
  2. Week 2
    Selectors: choosing what to style
    Style exactly the parts you want: every element of a kind, a group with a class, one element with an id, several at once, or only the ones inside another element.
  3. Week 3
    Colours and backgrounds
    Write any colour as a name, a hex code or rgb(), make colours see-through, and fill backgrounds with colours and gradients.
  4. Week 4
    Text and fonts
    Choose fonts with a backup, set sizes with units, and control bold, italic, alignment, line spacing and link underlines.
  5. Week 5
    Units and sizes
    Make things the right size: px for exact sizes, % to fit inside something, rem for text that grows together, and max-width so pictures never spill off the screen.
  6. Week 6
    The box model
    Every element is a box: content in the middle, then padding, then a border, then margin outside. Learn to give things breathing room, borders and rounded corners — and to centre a box.
  7. Week 7
    Which rule wins? The cascade
    When two rules give the same element different styles, only one can win. Learn the three tie-breakers — order, specificity and inheritance — and use the browser’s Inspect tool to see why.
  8. Week 8
    Project: style “All about me”
    Put weeks 1–7 together. The HTML for an “All about me” page is ready — make it yours with colours, fonts, sizes and boxes. There’s no single right answer: the checks look for the skills, not exact values.
  9. Week 10
    Flexbox 1: boxes in a row
    Put boxes side by side and line them up — left, right, centre, spread out, or in the middle both ways — with display: flex.
  10. Week 11
    Flexbox 2: menus and cards
    Build the two things every website has: a menu bar and a row of cards that wraps onto new lines on a phone. New today: gap, flex-wrap and list-style.
  11. Week 12
    CSS Grid: rows and columns
    Flexbox lines things up in one direction. Grid does rows and columns at the same time — perfect for photo galleries, dashboards and whole page layouts.
  12. Week 13
    Positioning: stickers, sticky menus and z-index
    Put things exactly where you want: a “SALE” sticker on the corner of a card, a menu that sticks to the top, a button that floats in the corner — and decide what goes on top.

HTML

  1. Week 1
    Your first web page
    Learn what HTML is, how a web page is built, and make your own page from scratch.
  2. Week 2
    Headings, paragraphs and comments
    Organise a page with six levels of headings, write paragraphs, and leave notes in your code with comments.
  3. Week 3
    Bold, italic, line breaks and lists
    Make words stand out with bold and italic, break lines inside a paragraph, and build bulleted and numbered lists.
  4. Week 4
    Links
    Link your page to other websites, open links in a new tab, and make an email link.