Path · Foundations
JavaScript, by building things
No "what is a variable". Just real projects, learned by shipping.
14 hrs·beginner·3 itemsOpen path
Tutorials · Implementation first
Most courses teach concepts before you have anywhere to put them. Here we do the opposite. Each tutorial is a build — a calculator, a chat, a login flow — and the concepts arrive at the moment the build demands them. By the end you have working software AND you understand why each piece works.
Build first
Every lesson produces working software. You learn the language by needing it.
Concepts in context
Variables, types, async — introduced the moment the build calls for them. Then catalogued.
AI-augmented
Traditional craft and AI-augmented practice, side by side. Prepare for both careers.
Learning paths
No "what is a variable". Just real projects, learned by shipping.
Build a real login flow. Sessions, password hashing, the works.
The architecture and orchestration skills for shipping real systems with coding agents.
The skill set that defines the next decade of software.
Courses · learn by doing
Build with AI · the dedicated track
The dedicated track for building production software WITH AI, and the software-architecture skill that makes it work. No on-site agent writes your code here — this teaches the human loop a senior runs: own the architecture, write the spec the model can hit, cut the work into agent-sized tasks, review what comes back adversarially, and orchestrate it all without the codebase rotting. The skill is the deliverable, and you keep it.
No on-site agent writes your code. This teaches the senior-engineer loop — the judgment that makes building with AI work. The skill is the deliverable, and you keep it.
Hand-picked builds
A button that increments a number on screen each time you click it.
C++ trades a little ceremony for a lot of speed and control. Write a first program, learn the compile-then-run cycle, and open it in /code.
Python reads almost like English. Write a small converter, see its output, and open the project in /code to keep editing.
Two equal tracks
Build it, then learn what made it work.
Build your first web page
Hand-write a small, semantic page — a heading, a paragraph, a list — then open the same project in /code and make it yours.
Build a program with AI
The vibe-coder path for C++: the few things you must understand to judge AI-written C++, the prompt, and the review.
Build a program with AI
The vibe-coder path for Go: the idioms you must recognise, the prompt, and the review that catches dropped errors.
Build a calculator
Most courses teach variables before you have anything to put in one. We are going to skip that pain. We build the calculator first; the concepts show up when the calculator demands them.
Style a card with CSS
The quickest way to feel CSS: take a plain card and give it depth, spacing, and a button — editing the same project the Deep and Reference tiers use.
Understand the idea so every build clicks.
HTML Headings
h1–h6 are instances of HTMLHeadingElement. They take no special attributes — only the global set and ARIA — but there’s real depth in how they form the document outline and what you can do with them from JavaScript.
HTML Headings
Everything about h1–h6 you’d look up mid-task, with no preamble.
HTML Headings
Headings, distilled to what you must remember.
HTML Headings
h1 through h6 are the page’s table of contents. Use them for structure, never for size — that’s what CSS is for.
CSS card — cheatsheet
The box-model card at a glance — the handful of properties that do the work, ready to copy.
Builds
Hand-write a small, semantic page — a heading, a paragraph, a list — then open the same project in /code and make it yours.
The vibe-coder path for C++: the few things you must understand to judge AI-written C++, the prompt, and the review.
The vibe-coder path for Go: the idioms you must recognise, the prompt, and the review that catches dropped errors.
Most courses teach variables before you have anything to put in one. We are going to skip that pain. We build the calculator first; the concepts show up when the calculator demands them.
The quickest way to feel CSS: take a plain card and give it depth, spacing, and a button — editing the same project the Deep and Reference tiers use.
Go is small on purpose: a handful of keywords, fast builds, and one obvious way to do things. Write a first program and open it in /code.
The vibe-coder path: the small mental model you must own to prompt for a card well, the prompt itself, and the review pass that separates a senior from someone who just pastes.
The vibe-coder path for HTML: the structure you must recognise, the prompt that gets semantic markup, and how to review what comes back.
The vibe-coder path for JS events: the event→state→render loop you must hold in your head, the prompt, and the review.
References
Reference · intermediate
h1–h6 are instances of HTMLHeadingElement. They take no special attributes — only the global set and ARIA — but there’s real depth in how they form the document outline and what you can do with them from JavaScript.
Reference · beginner
Everything about h1–h6 you’d look up mid-task, with no preamble.
Reference · beginner
Headings, distilled to what you must remember.
Reference · beginner
h1 through h6 are the page’s table of contents. Use them for structure, never for size — that’s what CSS is for.
Reference · beginner
The box-model card at a glance — the handful of properties that do the work, ready to copy.
Reference · beginner
One-liner reference for the card project’s properties — scan, copy, and open the live example.