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 working calculator. Type a number, an operator, another number, hit equals, get the answer. Same logic that powers the calculator app on your phone.
A page becomes alive the moment JavaScript listens for an event and changes the page in response. Build a counter, then open it in /code.
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.
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.
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.
Your first Python program
Python reads almost like English. Write a small converter, see its output, and open the project in /code to keep editing.
Understand the idea so every build clicks.
HTML Headings
Headings, distilled to what you must remember.
HTML Headings
Everything about h1–h6 you’d look up mid-task, with no preamble.
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.
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.
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.
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.
Python reads almost like English. Write a small converter, see its output, and open the project in /code to keep editing.
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 · beginner
Headings, distilled to what you must remember.
Reference · beginner
Everything about h1–h6 you’d look up mid-task, with no preamble.
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 · 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
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.