You can write the HTML and CSS, get everything working, and still look at a page and wonder why it feels awkward. The heading competes with the introduction. The gaps feel arbitrary. Two buttons ask for equal attention.
We’ve added interactive courses to GSAP Vault to give developers somewhere to practise those decisions. The starting point is Visual hierarchy for developers, a free course with six practical labs. You edit a live page, compare your changes and get feedback against the brief.
Start with a page that needs work
The first lab gives you a workshop page that asks people to book before explaining what they are booking. Your job is to rearrange its content so the offer and practical details arrive before the decision.
Move a block and the page changes alongside you. Read it again: does the booking button now arrive at a sensible point? You can compare your edit with the starting page, undo a change and inspect the HTML order and CSS behind your choices.
Each lab follows that pattern: a short principle, a concrete problem and a page you can change. The checks explain which parts of the brief your edit meets and what still needs attention. Several solutions can pass; the point is to understand what your choices do.
What you’ll practise in the free course
The six labs move from individual decisions to a fresh page where you bring them together:
- Order before decoration. Arrange the content so readers understand the workshop and its commitment before they book.
- Give type a job. Make the title lead, the body explain and the context label support through size and weight.
- Make space mean something. Bring related details together and separate the larger groups.
- Choose what matters. Give the main action clear emphasis while keeping the secondary action and supporting text readable.
- Keep the hierarchy on mobile. Check a narrow preview, adjust the headline and stack the actions.
- A fresh brief. Apply those decisions to a resource download page, then explain what you want someone to notice first.
That final change of content matters. You have to decide what helps this page communicate, using the relationships you practised in the earlier labs.
Who it’s for and how to start
The course is for developers who want more confidence deciding how a page should read. Basic HTML and CSS familiarity helps. You don’t need GSAP experience or design software, and the controls let you experiment directly in the browser.
The entire course is free, including every lab and the optional completion certificate. You can start without signing in, with progress kept in that browser. A free account lets you save progress across devices and issue your certificate once you’ve passed every lab’s practical checks.
Use a laptop or desktop with a browser window at least 1024px wide for the workspace. The course outline is readable on a phone, and the labs include a narrow preview for checking your design. You can stop between labs and return when you have space to concentrate.
Start the free visual hierarchy course
Where the other courses go next
The wider series takes the same practical approach to four more areas:
- Colour for developers: build interface palettes, work from photographs, assign colour roles and check readable combinations.
- Layout for developers: work with column grids, content spans, shared alignment, spacing and narrow-screen reflow.
- Motion design for developers: practise timing, easing, sequencing and interrupted interactions, including reduced-motion behaviour.
- Scroll animation for developers: work with GSAP ScrollTrigger positions, toggle actions, scrub, pinning and parallax on a live page.
These are included with the Course pass or the Vault. Each learner has their own account and access. The free visual hierarchy course stands on its own, with a complete brief to finish before you decide whether to continue.
See the course outlines for the full curriculum, or start with visual hierarchy.
