Resources

Short builds you can follow along with

Every tutorial produces something real you can keep. No twelve-part course before you are allowed to make a page.

Start here

1

Your first page

Install, open the canvas, and lay out a hero section from an empty document.

2

Layout with grid and flex

Build a responsive structure using the same properties you would write in CSS.

3

Set up your tokens

Define colour, type and spacing once so the rest of the build stays consistent.

4

Extract a component

Promote a card to a component and reuse it across two templates.

5

Templates and live data

Build a post type template that styles every entry the moment it is published.

6

Add some motion

Reveal sections on scroll and design hover states that do not feel accidental.

Going further

When the basics are not the problem any more

🛒

Build a shop

Product archives, single product templates and a checkout that matches the rest of the site.

Harder queries

Filtering, pagination and relationships between post types.

Making it fast

Asset control, image handling and what actually moves Core Web Vitals.

Learn it by building something

Every tutorial ends with a working page rather than a certificate.