WeaverCode
Learn to code by building the tools you learn with.
WeaverCode is an interactive, gamified code learning platform that teaches HTML, CSS, and JavaScript through a progressive puzzle system. 50 levels across 6 chapters take you from dragging code blocks to writing real, production-quality code — including the platform itself.
How It Works
- Read the challenge — every level has a clear goal and description
- Drag blocks into place — early levels provide all the code, just arrange it
- Edit directly — blocks fade as you progress, replaced by a real code editor
- Watch live preview — an srcdoc iframe updates instantly with every change
- Submit and advance — validation, scoring, hints, and the next challenge
Progressive Scaffolding
The core insight: start with everything, take it away slowly.
Chapter 1 — HTML Foundations
8 levels. Full blocks → write-code. Heavily scaffolded. Build your first page.
Chapter 2 — CSS Styling
8 levels. Faded blocks → pure code. Colors, typography, box model.
Chapter 3 — CSS Layout
8 levels. Hints only → pure code. Flexbox, Grid, responsive design.
Chapter 4 — JavaScript Basics
8 levels. Blocks return briefly, then fade. DOM, events, functions.
Chapter 5 — JS Interactivity
8 levels. Pure code. Build interactive components from scratch.
⭐ Chapter 6 — Build the Platform
10 levels. The meta-finale. Rebuild the landing page, the puzzle UI, and Level 1 itself.
Try It
WeaverCode is live and ready to explore. Start with the first puzzle — no sign-up required.