A better eye for the pages you build.

Knowing the CSS is only part of it

A page can work perfectly and still feel difficult to read. The heading competes with the button. The useful detail is somewhere below the fold. Everything lines up, but nothing tells you where to start.

Those are design decisions developers make every day. Knowing how to change a font size is useful; deciding which line deserves more attention takes a different kind of practice.

That is the goal behind the courses I’m building on GSAP Vault: give developers a place to practise those decisions and see what they do to a page. All the courses are free. I suggest starting with Visual hierarchy for developers, which focuses on the relationships between words, space and actions.

Change something. See what happens.

I wanted the learning to happen in the page itself. A principle becomes much easier to question when you can move a piece of content, compare the result and decide whether it helped.

Each exercise gives you a brief and an interface to work on. You edit it, compare it with the starting version and use the feedback to decide what to try next. The controls let you explore the design without setting up a project first.

Take a workshop page. Before someone books, they need to understand what they are signing up for. Making the booking action more prominent might help, but only if the explanation and practical details appear in a sensible order. The interesting question is what the reader needs next.

Give each decision a job

The course moves through reading order, type, spacing, emphasis and smaller screens, then asks you to apply those ideas to a different brief. That last step matters: a useful lesson should travel beyond the page where you learned it.

A larger heading alone cannot fix an unclear structure. Space can show that two details belong together. A quieter secondary action can make the main one easier to find. A narrow screen can expose an order that only seemed to work on desktop.

These choices affect one another. I want people to leave with better questions to ask of their own work: what should someone notice first, what belongs together, and what can wait?

A small place to start

The free courses cover visual hierarchy, colour, layout, motion design and scroll animation. You can try a lab, make a few changes and come back later. The aim is a manageable stretch of practice that fits around the work you already do.

All six labs in the visual hierarchy course are free, as is the optional completion certificate. You can begin without signing in; a free account lets you carry your progress across devices and get the certificate. The exercises currently need a laptop or desktop, while the course outline can be read on a phone.

For me, success is someone returning to a page they are building and spotting a change they can explain. A clearer introduction. Better grouping. An action in the right place. That is a useful thing to take back to work.

If that sounds useful, browse the free courses and choose a subject you want to practise. Visual hierarchy is a good place to begin.