Learn to build for the
web. Live, in your browser.

Interactive HTML, CSS, and JavaScript that render the moment you hit Run — then go further than any tutorial and ship a real edge app with Cloudflare Workers, D1, and KV in an in-browser Worker simulator. Every challenge auto-graded. No setup, no install.

No credit card for the free tier · three full tracks free forever

style.css
.card {
  text-align: center;
  padding: 22px;
}
.card h3 {
  color: #6366f1;
}
button {
  background: #6366f1;
  border-radius: 8px;
}

Hello, web!

Why Webinator

See your code run. Prove you got it.

Most "courses" are videos you watch. Webinator is a live sandbox next to a written explanation, with a graded challenge that runs your actual code.

🪄

Live preview, instantly

Your HTML, CSS, and JavaScript render in a sandboxed iframe the moment you hit Run. Change a color, watch it move. No build step, no server.

Graded on what actually renders

Challenges check the real computed styles, the real DOM, the real console output — not string matching. Pass to mark complete; hints appear gradually.

🚀

An in-browser Worker simulator

The Stack track runs your real Cloudflare Worker — export default { fetch } — against a mock request, a live SQLite database (D1), and KV. Build a backend with zero deploys.

The editor pros use

The same Monaco editor that powers VS Code — syntax highlighting, multi-cursor, keyboard shortcuts. It feels like the real thing because it is.

📜

Certificates & badges

Finish a track, download a personalized PDF certificate. Earn badges at every milestone and keep a streak going.

🧪

Free-form Playground PRO

A no-rules scratchpad with a live preview, console, and the Worker simulator. Prototype a page or a tiny API and share it by link.

The curriculum

Five tracks. From your first tag to a shipped app.

Start anywhere. The fundamentals are free; the JavaScript and edge-stack tracks are where it gets serious.

FREE
🎨

Kids

Make your first page light up — headings, lists, links, color. Jargon-free, ages 7+.

FREE
🌱

Beginner

HTML structure: headings, lists, links, images, forms — build real pages from scratch.

FREE
🎯

CSS

Box model, flexbox, grid, responsive layout, transitions — graded on rendered styles.

PRO

JavaScript

Variables → the DOM → events → fetch → async. Real interactivity, auto-graded as it runs.

PRO
🚀

The Stack

Cloudflare Workers, D1, KV, email, and auth — build a real edge backend in the simulator.

How it works

Read, code, run, pass.

Every lesson follows the same loop. The skill comes from the doing — not the watching.

Read the explanation

Tight, plain-English, with code examples. One idea per lesson.

Build it in the editor

A real Monaco editor with starter code. Hit Run and your work renders live beside it.

Check your answer

Hidden tests run against the actual result — computed styles, the DOM, the HTTP response. Pass/fail with helpful messages.

Stuck? Hint, hint, solution.

Three progressive hints. The solution unlocks after a few attempts — earn it the right way.

Pricing

Free to start. $5 to go all the way.

Kids, Beginner, and CSS are free forever. Pro unlocks JavaScript, The Stack, and the Playground.

Free

$0 forever
  • Kids, Beginner & CSS tracks
  • Live preview + auto-grading
  • Hints on every challenge
  • CSS track certificate

Pro

$5/mo · or $39/yr
  • Everything in Free
  • JavaScript track
  • The Stack track + Worker simulator
  • Free-form Playground
  • All certificates · cancel anytime
FAQ

Questions you might have

 

Do I need to install anything?

No. Everything runs in your browser — your HTML/CSS/JS render in a sandboxed iframe, and the Worker simulator runs a real SQLite database (sql.js) locally. There's nothing to download and no server to manage.

Is the Worker track real, or a toy?

Real. You write an actual Cloudflare Worker — export default { async fetch(request, env) } — and we run it against a mock Request, a live in-memory SQLite database exposed through the real D1 API, a KV store, and a service binding for email. The code you write is the code you'd deploy.

How are challenges graded?

By running your code. CSS lessons check the real computed styles; JavaScript lessons check the DOM, return values, or console output; Worker lessons check the HTTP response, the database, and KV. No brittle string matching.

Can I cancel my Pro subscription?

Anytime, in one click. Open the user menu → Manage subscription → cancel. You keep Pro access until the end of the period you've paid for. See our refund policy.

Will my progress carry over if I upgrade?

Always. Your progress, streak, and earned badges/certificates stay tied to your account regardless of plan.