Courses / Learn by doing

Practical web design courses

Short labs on a real page, for developers, designers and anyone curious about how an interface works and who can use it. Change a live page, test the result, and get feedback on the decision. Take the courses in any order.

Start the first course See every course

Every course is free, with no account needed. Progress is saved in this browser. Clearing browser data will remove it.

The page is the exercise
Work on a live interface with direct manipulation, and get feedback on each decision against a practical brief.
Progress that keeps
Every lab saves where you left it in this browser, so you can return after a lunch break. Progress does not sync across devices.
A record of your learning
Complete the labs to download a personal completion record, created on your device.

Pick a course.

Each course stands on its own, so start wherever your work needs it. They are all free, and you can start any of them without signing in.

6 courses · about 6 hours
  • A little hierarchy changes everything.
    A practical workshopMake the important
    thing feel important.

    Same words. Same typeface.
    A much clearer place to start.

    Reserve a placeRead the outline
    Before · everything competesTry it

    FreeAbout 35 minutes6 labs

    Visual hierarchy for developers

    Turn a busy page into a clear one. Move content, edit typography and spacing, balance actions, and make your decisions work on mobile.

    Start the free courseSee the curriculum
  • A grid you can defend.Interactive practice
    Grid, spans, edges, scale, measure and reflowFree course

    FreeAbout 50 minutes7 labs

    Layout for developers

    Compose a page section on a column grid. Choose the grid, place content by span, share alignment edges, set one spacing scale, give text a measure and reflow it for a narrow screen.

    Start the free courseSee the curriculum
  • A palette with a purpose.Interactive practice
    Café interior with pale brick, timber shelves, plants and warm pendant lights

    Field notes / A reading collection

    Give every colour
    a useful job.

    A quiet surface. Readable words.
    One clear place to act.

    Open the collectionBrowse the index
    SurfaceTextActionAccent
    From a photograph to an interface paletteFree course

    FreeAbout 85 minutes8 labs

    Colour for developers

    Build interface palettes from colour theory and photography. Sample an image, assign colour roles, and balance emphasis, contrast and status.

    Start the free courseSee the curriculum
  • A sequence with a purpose.Interactive practice

    Motion / A visual timeline

    Let attention
    arrive in order.

    Introduce. Explain. Invite.

    Timing, easing and usable behaviourFree course

    FreeAbout 75 minutes7 labs

    Motion design for developers

    Design purposeful interface motion. Shape timing, easing and sequence, handle interruptions, and adapt for smaller screens and reduced motion.

    Start the free courseSee the curriculum
  • A trigger you can read.Interactive practice
    Triggers, actions, scrub, pin and layersFree course

    FreeAbout 50 minutes6 labs

    Scroll animation for developers

    Drive animation with scrolling. Read trigger markers, decide what each crossing does, scrub a drawing, pin a chapter stage and layer a hero without moving the words.

    Start the free courseSee the curriculum
  • A page people can use.Interactive practice
    Structure, keyboard, forms and feedbackFree course

    FreeAbout 90 minutes8 labs

    Accessibility for developers

    Find and repair accessibility barriers in a real interface. Work with meaningful HTML, keyboard controls, readable information, form feedback, reflow and reduced motion.

    Start the free courseSee the curriculum

Inside a lab.

Move a control. Watch the page change. The brief and the feedback sit beside your work, and every lab has more than one good answer. Explore the free course, or read the introduction to the courses.

Visual hierarchy · Lab 2 · Give type a job
Silent, at 2× speed: the cursor sets the headline, body and label sizes, changes the heading weight, then compares the edit with the starting page.
Visual hierarchy for developers · Lab 2 of 6 · 2× speed

Move a control, watch the page change. Try this lab yourself, free.

Something to take away.

Complete every practical lab to download a personal completion record. Open the downloaded HTML file to print it or save it as a PDF. Your name stays on your device, and there is no public verification page.

GSAP Vault

Course completion record

Your name

has completed the practical labs in

Visual hierarchy for developers

Downloaded
The day you save it
Issued by
GSAP Vault
Saved as
A personal download