This course is for web developers who've used AI a little or not at all. We start with what's actually happening when AI writes code, then build a Vue todo app by going up one level of AI help at a time, and staying in control at each one:

  1. A chat in the browser. You copy and paste, and it only knows what you tell it.
  2. An agent in your project, where you approve every change it makes.
  3. An agent you plan with and supervise, and that proves its work.
  4. Several agents at once, one on your machine and one in the cloud. Then six lessons cover the settings and add-ons you'll find in any coding agent: which model it uses and how hard it thinks, what it can do without asking, and skills, subagents, MCP servers and hooks.

By the end you'll be using a coding agent to plan, build, check and merge features, and staying in control at every level.

The lessons:

  1. How AI Writes Code
  2. Debugging and Planning with a Chat
  3. Set Up Claude Code and Build the Todo App
  4. Understanding Code You Didn't Write
  5. Targeted Edits in VS Code
  6. What Your Agent Can See
  7. Planning a Feature with an Agent
  8. Checking the Agent's Work
  9. Run Agents in Parallel
  10. Reviewing and Merging a Cloud Agent's Work
  11. Other AI Development Tools
  12. Choosing a Model and Effort Level
  13. Permission Rules and Settings
  14. Saving a Repeated Job as a Skill
  15. Handing Work to a Subagent
  16. Connecting Tools with MCP
  17. Running Checks Automatically with Hooks
  18. Where to Go Next What you need: Node 24 (24.15 or newer) or Node 22 (22.22.2 or newer), git, VS Code, and Chrome with the Claude in Chrome extension (from lesson 08). Lessons 01 and 02 work with any free chat. From lesson 03 we use Claude Code, which needs a paid Claude plan. Lesson 04 reads Elk, an open-source Nuxt app, so you'll clone that too. Lessons 09 and 10 use GitHub, the GitHub CLI and Claude Code on the web. Lesson 16 connects a free documentation service that needs no account.

Each lesson starts where the last one ended. The commands and files a lesson uses are on its page, and the course repo has a tag for the start of each lesson from 04 on, so you can join anywhere.

Using a different agent? The ideas carry over. Lesson 11's page, and each page from 12 to 17, has a table of what the same things are called in Codex, Cursor and GitHub Copilot.

Up next · Lesson 2 · 4 min
How AI Writes Code

Press ? for keyboard shortcuts.

Keyboard shortcuts

SpaceK
Play or pause
JL
Back or forward 10 seconds
T
Transcript beside the video
O
Outline
F
Fullscreen
ShiftN
Next lesson
?
This list

Shortcuts work while the video area has focus (click beside the video or tab to it), so they never clash with screen reader or speech input keys.

Single-key shortcuts