Easier to read with cream paper, a tint, more contrast or larger text? Choose your colours and text, once, for every page.

Free module

Front-end web development

Learn front-end web development hands on: HTML structure, the CSS cascade, the box model, flexbox, grid, JavaScript and the DOM, forms and page checks.

6 lessons340 min lessonSoftware engineering

The lessons

Each lesson is free to read in full. Create a free account to run its commands in a live lab and to sit its quizzes and tasks.

  1. 1 · Container lab

    HTML structure and elements

    I can structure a page with meaningful HTML.

    Read the lesson

  2. 2 · Container lab

    CSS selectors and the cascade

    I can predict which CSS rule wins.

    Read the lesson

  3. 3 · Container lab

    The box model, flexbox and grid

    I can lay out a page with the box model, flexbox and grid.

    Read the lesson

  4. 4 · Container lab

    JavaScript and the DOM

    I can change a page with JavaScript.

    Read the lesson

  5. 5 · Container lab

    Events and form validation

    I can handle a click and check a form.

    Read the lesson

  6. 6 · Container lab

    Checking a web page

    I can check a page for structure and size.

    Read the lesson

Worked in a real lab

Every lesson of this module is worked in a lab started for you alone. The labs it uses:

Teaching a class? Set this module for your students with a teacher guide, marked assignments and a lab for every student.