How the lessons are made

Where the knowledge comes from

• Books on JavaScript, programming, and the web that I’ve learned from over the years.
• Trusted references on the web, such as MDN Web Docs and the ECMAScript specification, the standard that defines JavaScript.
• My own experience: more than nine years of frontend engineering at several top tech companies, today as a Senior Software Engineer at Microsoft, working on Copilot Enterprise. It decides what each lesson stresses: the ideas you actually use on the job, and the mistakes that show up in real projects.

The lessons explain ideas in their own words, with their own examples; they aren’t copied from any source. If a book or website gets something wrong, the lesson follows the official JavaScript specification and what the code really does when you run it.

The lesson structure is my design

Every lesson follows the same teaching sequence, which I designed so you understand an idea before you’re asked to use it, and use it before you’re tested on it:

1. 01
   OutcomesWhat you’ll be able to do by the end, and a plain definition up front.
2. 02
   ExplanationMany small, easy examples, each explained line by line, with a real-life analogy and an honest note on where the analogy stops.
3. 03
   ExperimentsWoven into the explanation, not saved for the end: step through real code, change one input, and watch what changes.
4. 04
   Practical useWhere the idea shows up in real code and real websites.
5. 05
   MisconceptionsThe mistakes people commonly make, with accurate contrasts, and comparisons of ideas that are easy to confuse.
6. 06
   Practice exercisesFrom warm-up to challenge: predict an output, write a small program, or find a bug, each with hints and a worked solution.
7. 07
   A lesson quizFive to eight questions that mix concepts with “what does this print?”, with every choice explained.
8. 08
   TakeawaysA one-line summary of the lesson and what comes next.

The curriculum is my design too: 343 lessons in 12 stages, ordered so each one builds on the last, from why JavaScript exists to how engines run your code. 315 lessons are published so far.

Built for learning by doing

Reading about code isn’t the same as watching it run, so every lesson lets you work with the code itself.

• Step through real code. Click the next blue line or press Step, and each event is explained, with values appearing beside the lines that created or changed them. Back takes you to any earlier moment. The player replays a recording of the real code running: a guided walkthrough, not a debugger.
• Edit and run every example. JavaScript, TypeScript, JSX, HTML, and CSS examples open as an editor inside the lesson, or pop out into the full code editor, so you can change them and see what happens.
• Practice as you go. Sorting games, exercises, and quizzes check your answers on the spot and explain each one.

A site designed for focus

I designed the site to keep your attention on the idea you’re learning: a calm reading surface in a dark or light theme, code that’s always visible, navigation that shows where you are in the path, and a map of each lesson with your reading progress. Every color, size, and spacing comes from one design system, so every lesson looks and works the same way, on a phone or a desktop.

Tuto, your study buddy

Tuto is my idea of what a good tutor does: it knows the lesson you’re reading. Ask it a question, or drag it onto any line of code, and it explains that part of the lesson.

Its AI answers come from Google’s Gemini, grounded in notes prepared for each lesson. Its walkthroughs and links always come from those notes, and it tells you when it isn’t sure instead of guessing.

Where AI helps

One person can’t hand-write hundreds of interactive lessons, each with dozens of runnable examples, exercises, and quizzes. So I use AI the way I use it as an engineer: as a tool that works inside a system I’ve designed.

I decide the curriculum, the teaching structure, the rules every lesson must follow, the design, and the interactions. AI tools help draft each lesson’s text, examples, and exercises within those rules. Then every lesson is checked, as described below, and I decide what gets published.

How every lesson is checked

• Outputs and answers are proven. Each lesson has automated tests that run its code as real JavaScript and confirm the outputs, quiz answers, and exercise answers it shows. If a lesson says a line prints 3, a test confirms it does.
• Examples run as the lesson shows. Every runnable example is opened in a real browser to confirm it runs the way the lesson describes, or fails exactly where the lesson says it should.
• The values you step through are real. The step-by-step players replay recordings of the actual code running, so every value you see is one JavaScript produced.

Spotted a mistake?

Use the Give feedback button at the bottom right of any page; you don’t need to sign in. Feedback goes straight to me, and lessons are corrected when something is wrong or unclear. Each lesson shows the date it was last updated.