Claude Code Tutorial: From Install to Your First App (2026)

Get Claude Code installed and running

1. 1

   Open the Claude Code homepage and copy an install command

   Claude Code lives at claude.com/claude-code, and the homepage hands you a copy-ready command: a bash one-liner for Mac and a PowerShell one (irm https://claude.ai/install.ps1 | iex) for Windows. Kevin actually hit problems with the script, so the next step shows the npm route he recommends instead — either path works, you only need one.

   

2. 2

   Install Node.js, then install Claude Code with npm

   If the native script misbehaves, grab Node.js from nodejs.org first and confirm it with node -v. Then run npm install -g @anthropic-ai/claude-code — "added 1 package in 1s" means the claude command is now available in any terminal.

   

3. 3

   Launch Claude Code inside VS Code's terminal

   Type claude anywhere to start, but Kevin runs it inside Visual Studio Code: open the integrated terminal, pick Command Prompt from the dropdown, run claude and press 1 to trust the folder. The welcome box greets you with tips like "Run /init to create a CLAUDE.md file with instructions".

   

Brief Claude like an engineer, in plan mode

1. 4

   Write a bullet-point brief instead of a vague wish

   Instead of one vague sentence, list hard requirements as bullets — calendar view like Outlook, adding and removing chores, recurring schedules, team assignments — then end with "Ask me questions to clarify the product requirements, technical requirements, engineering principles, and hard constraints." Press Alt+Enter (Option+Enter on Mac) for new lines without submitting.

   

2. 5

   Switch into plan mode before Claude writes anything

   Hold Shift and tap Tab until the composer shows "plan mode on (shift+tab to cycle)". In plan mode Claude never writes code automatically — it reasons about the project and confers with you first, which keeps a first build on the rails.

   

3. 6

   Answer Claude's clarifying questions

   Claude replies with a questionnaire — tabs for Tech Stack, Data Storage, Authentication and Extra Features. Answer with the number keys (a React web app, no auth needed), move between questions with Tab or the arrow keys, and choose Submit when you're done. The video's lesson: richer answers here produce a richer plan.

   

Generate, test and commit your first app

1. 7

   Review the implementation plan it hands back

   Claude returns a full plan for the Office Chore Management app — tech stack (React 18 + Vite, TypeScript, state management, date-fns), data models and an annotated file tree of every component it intends to create. Read for decisions you never asked for: Kevin spots Vite, Tailwind and plain JavaScript in his and objects.

   

2. 8

   Approve the tool calls, or set a don't-ask-again rule

   Before running commands like npm install, Claude asks "Do you want to proceed?" with three options: yes; yes and don't ask again for npm install commands; or no, and tell Claude what to do differently. Kevin picks option 2 for safe, routine tools so the build keeps moving.

   

3. 9

   Test the app it built with real data

   With edits auto-accepted, Claude scaffolds the whole chore app. Kevin prefers to start the dev server himself (npm run dev in a separate terminal), then exercise the UI: add team members, then create a recurring "Bake Cookies" chore in the Kitchen category assigned to Kevin, repeating weekly.

   

4. 10

   Commit early and often so you can roll back

   Every extra prompt is a chance to introduce regressions, so commit each working state. In VS Code's Source Control panel, stage the files, write a message and hit Commit or Publish Branch — and stay on a branch, which keeps reverting to the last known good state one command away.

   

Give Claude a memory with CLAUDE.md

1. 11

   Understand why CLAUDE.md matters

   CLAUDE.md is the file whose contents get injected into every Claude Code session: your tech stack, the purpose of each component, and how you want Claude to work — run tests, typecheck, branch first. The Humanlayer article Kevin quotes breaks the file into WHAT, WHY and HOW layers.

   

2. 12

   Generate CLAUDE.md with /init or a structured prompt

   The quick way is typing /init — "Initialize a new CLAUDE.md file with codebase documentation", offered right in the slash-command menu. Kevin finds /init output too thin, so he pastes a richer prompt covering the what/why/how layers plus progressive disclosure: an index that points to extra markdown files.

   

3. 13

   Prove the memory works with a one-line bug report

   Restart Claude and describe only the symptom: clicking the calendar adds the chore at the wrong time. Thanks to CLAUDE.md it already knows the conventions, creates a fix branch before touching code, then explains the root cause — toISOString converts to UTC while the input expects local time — and lists the files changed.

   

Speed up with YOLO mode and ship real-time sync

1. 14

   Know what YOLO mode really does

   Launching claude with --dangerously-skip-permissions — YOLO mode — removes every approval prompt: Claude just runs commands. Claude Code answers with a red warning and makes you accept responsibility before continuing. Kevin's take: the speed is real and so is the risk, so toggle it per session with Shift+Tab when you actually need it.

   

2. 15

   Ask for three options on a big architecture change

   For the big one — chores syncing across tabs in real time — Kevin returns to plan mode and asks Claude to explore the relevant files and propose three options. Claude answers with LocalStorage events, the BroadcastChannel API or a WebSocket backend, each with a one-line trade-off. Asking for options is classic prompt engineering applied to code.

   

3. 16

   Verify the result in two browsers side by side

   Five minutes later Claude has written a WebSocket server. The proof is visual: two browser windows side by side — add Elizabeth as a team member or drop a "Feed the fish" chore in one and it appears instantly in the other. All that's left is reviewing the code like you would any teammate's.

   

Frequently asked questions