Build Your Block

Learn to code. Build something that matters.

An interactive web development course for middle and high school students. Ten weekly sessions of about an hour each — roughly 250-300 tiny hands-on steps in total — building HTML, CSS, and JavaScript skills by building a themed project every week: a house, a shop, a personalized makeover, a neighborhood layout, an interactive control panel, a small game, a broken site to debug, a project for someone else, a new addition to their own block, and a final capstone that connects everything they've built.

The central metaphor is a neighborhood block that grows every week as the student's skills grow. The goal isn't "learn HTML" — it's "I can build something," then "I can figure things out," then "I can use technology to help someone," ending in "I built this."

Current status: all 10 weeks are built and live-verified, end to end — 279 steps. Weeks 9-10 were recently redesigned around the Build Your Block metaphor (see HANDOFF.md §35), and the UI/UX had a full redesign pass (see HANDOFF.md's latest section) — a fixed-height desktop workspace for the step/lesson page, a Retro-Futurism visual identity on the same color palette, and XP replaced by task-completion progress (a segmented per-step meter plus the Block's band-emoji reveal). See CURRICULUM.md for the full week-by-week outline and CLAUDE.md for the technical/AI development guide.

Repo layout

FE/         Frontend — the student-facing app (Astro + TypeScript + Tailwind). Built and live.
BE/         Backend — intentionally empty. Reserved for future auth/API work (see BE/README.md).
database/   Database — intentionally empty. Reserved for future persistence, e.g. Supabase (see database/README.md).

Only FE/ is implemented right now, by design — see CLAUDE.md section 8, "What not to build." All progress (completed steps, block state) lives in the browser via localStorage; there is no backend or database yet.

Getting started

cd FE
npm install
npm run dev      # http://localhost:4321
npm run check    # TypeScript + template check
npm run build    # production build

See FE/README.md for the frontend's architecture in depth — the content model, the step engine, how validation works, and how to add a step or a new week.

Documentation map

File	What it's for
README.md (this file)	Product overview, repo layout, how to run it
CLAUDE.md	AI/developer guide — architecture rules, conventions, what not to build, deprecated approaches
FE/README.md	Frontend technical architecture in detail
CURRICULUM.md	The full 10-week curriculum content plan, week by week
HANDOFF.md	Chronological build log/changelog — history and design rationale, not a current-state reference