THE WEB IS YOUR CANVAS

Less watching.
More “I made this.”

Learn HTML & CSS by building things that feel like yours. Change the code. See what happens. Understand why.

Start building ↗Free · No signup · No AI required

4 real projects24 guided builds∞ ways to make it yours

<idea>
your next thing
</idea>

YOUR LITTLE CORNER OF THE WEB ✳

Hello, maker.

Good things start with one small change.

Structure
HTMLPersonality
CSS

Make it. Break it. Get it.

YOUR BUILDING PATH

Start small. Leave with a website.

Loading your workshop…

THE WORKSHOP

Your next small win

Jump to code ↓ · See preview ↓

Your build brief

New to code? Start here

HTML wraps content in elements: <p>Hello</p>. An attribute adds information: class="card". CSS selects elements and applies declarations: .card { padding: 24px; }. Edit HTML and CSS in their own tabs. The studio supplies the document shell. Try one small change, watch the preview, then run checks.

HTML here is a body fragment. Scripts, embedded pages, inline style attributes and remote assets are excluded. Put styles in the CSS tab; the café example includes a built-in image.

A nudge, not the answer

See one possible solution

Compare the approach, then try it yourself. Loading it does not count as independent completion.

Explain it back

Make it yours ↗

What did you notice?

HTML · content inside the page body

Live preview after a short pause · Ctrl/⌘ + Enter runs checks · Tab leaves the editor

Canvas scales to fit this panel; checks use the selected CSS pixel width. Scripts and external requests are blocked. Enable Interact for forms or click-to-inspect.

Checks verify selected requirements, not full accessibility or visual quality. A worked example is one solution, not the only correct design.

Explore an element & adjust its style

Choose an element or enable Interact and click the preview. Read its actual browser values; apply a CSS rule you can inspect in the editor.

Element

Preview is loading.

Padding Corner radius Background

BEFORE YOU SHARE

Give your creation a real-world check.

These are personal review notes, not an automated certification.

KEEP EXPLORING

A small field guide. Big possibilities.

Find a concept

Your next version starts with a question.

What happens if I change this? Keep a copy, try an idea, and let the browser show you.