Skip to content
skillbld
All courses

Learn to build web pages from scratch. Write HTML to structure text, links, images, tables and forms, then use CSS to style them: colours and fonts, the box model, Flexbox and Grid layouts, and designs that work on phones. Every example is a live editor: change the code and watch the page update. Diagrams, a quick knowledge check every day, and a personal website to finish.

  • 14 days
  • ~25 min / day
  • Beginner
  • Free, no sign-up
Already know some of this? Take the 70-question skill test
0/14

Ready when you are

Saved on this device. No account needed.

Start Day 1

The big picture

Everything you'll cover, and how it fits together.

Mind map · click a dot to fold, drag to pan

Day by day

Go at your own pace. Your progress is remembered on this device.

  1. 1
    Day 1Up next 25 min

    Your First Web Page

    What HTML and CSS are, how tags work, and the shape of every page.

    TagsElementsPage structure
  2. 2
    Day 2 25 min

    Text & Lists

    Headings, paragraphs, emphasis and lists that give text meaning.

    HeadingsListsEmphasis
  3. 3
    Day 3 25 min

    Links & Images

    Connect pages with links and add images that everyone can understand.

    <a><img>alt text
  4. 4
    Day 4 25 min

    Semantic Layout & Tables

    Header, nav, main and footer, plus tables for data.

    Semantic HTMLdiv & spanTables
  5. 5
    Day 5 25 min

    Forms

    Inputs, labels, buttons and built-in validation.

    <form>InputsValidation
  6. 6
    Day 6 25 min

    Hello, CSS

    Write your first styles: rules, selectors, colours and fonts.

    RulesClassesColours
  7. 7
    Day 7 25 min

    Selectors & the Cascade

    Target exactly what you want, and know which rule wins.

    SelectorsSpecificityInheritance
  8. 8
    Day 8 25 min

    The Box Model

    Content, padding, border and margin: the space around everything.

    PaddingMarginbox-sizing
  9. 9
    Day 9 25 min

    Typography & Colour

    Readable text, colour formats, backgrounds and CSS variables.

    FontsUnitsVariables
  10. 10
    Day 10 25 min

    Flexbox

    Line things up in a row or column: navbars, cards and centring.

    Flexjustify & aligngap
  11. 11
    Day 11 25 min

    Grid

    Two-dimensional layouts: galleries and whole pages.

    ColumnsfrAreas
  12. 12
    Day 12 25 min

    Responsive Design

    Pages that work on phones, tablets and desktops.

    ViewportMedia queriesMobile-first
  13. 13
    Day 13 25 min

    Polish & Accessibility

    Positioning, transitions, focus styles and pages everyone can use.

    positionTransitionsAccessibility
  14. 14
    Day 14 25 min

    Project: Your Personal Page

    Build a complete, responsive personal page and put it online.

    PlanningBuildingPublishing