Claude Code for Beginners: How to Build Your First App with Anthropic's AI Agent

Claude Code is Anthropic's AI coding agent. You describe what you want in plain English, and it reads your project, plans the work, edits files, runs commands and tests, and fixes its own mistakes, asking your permission along the way. It runs in your terminal, inside VS Code and JetBrains, in a desktop app, and on the web, and it's one of the most capable tools for vibe coding real projects.

This guide assumes no prior experience with terminal tools. By the end you'll have Claude Code installed, understand the handful of features that matter most, and have built a small working app.

What is Claude Code?

Unlike autocomplete tools that suggest the next line, Claude Code is an agent. Give it a goal like "add a dark mode toggle that remembers the user's choice" and it will:

1. Search your codebase to understand how things work
2. Propose a plan (if you ask, or use plan mode)
3. Edit the files that need to change
4. Run your dev server, linter or tests
5. Read the errors and fix them
6. Summarize what it did

You stay in control: by default it asks before editing files or running commands, and you can review every change.

Claude Code pricing

Claude Code is included with paid Claude plans, or you can pay per use through the API:

The free Claude plan doesn't include Claude Code. Check claude.com/pricing↗ (opens in a new tab) for current details. If you're comparing costs across tools, see our AI coding tools comparison.

Where you can use Claude Code

• Terminal (CLI): the original and most powerful interface.
• VS Code and JetBrains extensions: see Claude's changes as inline diffs inside your editor. Works in Cursor too.
• Desktop app: a graphical interface for running local and cloud sessions.
• Web and mobile (claude.ai/code): run tasks in the cloud against a GitHub repository, even from your phone.

Your settings and project instructions work the same everywhere.

How to install Claude Code

On macOS, Linux or WSL, run the native installer:

curl -fsSL https://claude.ai/install.sh | bash

On Windows PowerShell:

irm https://claude.ai/install.ps1 | iex

Alternatively, if you already have Node.js 18+: npm install -g @anthropic-ai/claude-code. Follow the official setup guide↗ (opens in a new tab) if anything goes wrong.

Then open a terminal in your project folder (or an empty folder) and start it:

mkdir my-first-app && cd my-first-app
git init
claude

The first time, it opens a browser window so you can log in with your Claude account.

Why git init? Git lets you undo anything the agent does. If you've never used it, read Git for vibe coders — it takes ten minutes and will save you hours.

The 7 features beginners should learn first

1. Plan mode

Press Shift+Tab to cycle permission modes until you see "plan mode". In plan mode Claude researches and proposes a plan without changing any files. Review it, ask questions, then approve. Planning first is the single biggest quality upgrade you can make; our spec-driven development guide explains why.

2. CLAUDE.md (project memory)

Run /init and Claude creates a CLAUDE.md file describing your project: the stack, commands, and conventions. It reads this file at the start of every session. Keep it short and accurate, and update it when Claude repeats a mistake. Claude Code also reads AGENTS.md if there's no CLAUDE.md. Learn what to put in it in our AI context files guide.

3. Permission modes

By default, Claude asks before editing files and running commands. As you gain trust you can allow edits automatically ("accept edits" mode) while still approving commands. Avoid skipping permissions entirely on your real machine.

4. Referencing files with @

Type @ to point Claude at specific files or folders: "Refactor @app/page.tsx to use the components in @components/ui." Specific context gives better results.

5. Slash commands

A few you'll use constantly:

6. Rewind

Press Esc twice to rewind the conversation and your code to an earlier checkpoint. It's a lifesaver when Claude goes down the wrong path, though Git is still your real safety net.

7. Screenshots and images

Drag a screenshot or design mockup into the terminal (or paste it) and say "make the pricing page look like this." Visual context works remarkably well for UI work.

Your first project: a step-by-step walkthrough

Let's build a simple expense tracker web app.

Step 1: Start in plan mode. Press Shift+Tab until plan mode is on, then type:

I want to build a simple personal expense tracker web app. I'm a beginner.
- Add expenses with amount, category and date
- See a list of this month's expenses and a total per category
- Data saved in the browser (localStorage) for now
Use Next.js 16 with TypeScript and Tailwind. Ask me any questions first,
then propose a plan with small steps.

Step 2: Answer questions and approve the plan. Push back on anything you don't understand: "Why do we need that library?"

Step 3: Let it build step by step. Claude will scaffold the project with create-next-app, create components, and run the dev server. Approve commands as they come up.

Step 4: Check it in the browser. Open the URL it gives you (usually http://localhost:3000). Try to break it: empty amounts, huge numbers, weird dates.

Step 5: Report bugs precisely.

When I add an expense with amount "abc" the app shows NaN in the total.
Validate the amount (positive number, max 2 decimals) and show an error under the field.

Step 6: Commit. Ask "commit this with a descriptive message" or run git add -A && git commit -m "Expense tracker v1" yourself.

Step 7: Ask it to teach you. "Explain how the total per category is calculated, file by file." This is how vibe coding turns into real skill.

When you're ready to add accounts, a database and deployment, follow build and deploy a full-stack app with AI.

Leveling up

Once you're comfortable, explore:

• MCP servers: connect Claude to GitHub, your database, a browser (Playwright) or documentation. See MCP explained.
• Subagents: specialized helpers (like a code reviewer or test writer) that work in their own context.
• Hooks: run commands automatically, such as formatting files after every edit.
• Mods: small TypeScript modules that change how Claude Code behaves and looks. See our Claude Code Mods guide.
• Skills: reusable folders of instructions and scripts that teach Claude a workflow.
• Headless mode: claude -p "..." for scripts and CI, plus GitHub Actions integration.
• Parallel sessions: run several sessions in separate Git worktrees or in the cloud.

Common beginner mistakes

1. Giant prompts. "Build me Airbnb" fails. One feature at a time works. See our prompting guide.
2. Never clearing context. Long, wandering conversations degrade quality. Use /clear between tasks.
3. Not committing. Commit after every working step.
4. Approving without reading. At least skim plans and diffs, especially anything touching auth, payments or data deletion.
5. Letting it loop. If Claude has tried the same fix three times, stop and change approach. Our debugging guide shows how.
6. Shipping without a security pass. Run the vibe coding security checklist before anyone else uses your app.

Claude Code vs other tools

• vs Cursor: Cursor is an editor with built-in agents; Claude Code is an agent you can use from any editor (including Cursor).
• vs GitHub Copilot: Copilot is cheaper and deeply tied to GitHub; Claude Code is generally stronger on long, complex tasks.
• vs app builders: Lovable or Bolt are easier for total beginners but harder to take beyond a prototype.

Frequently asked questions

Do I need to know how to code to use Claude Code?

No, but you'll need to be comfortable typing commands in a terminal. The desktop app and web version are friendlier if the terminal intimidates you.

Is Claude Code free?

No. It requires a paid Claude plan (from $20/month) or API credits.

Can Claude Code break my computer?

It asks permission before running commands by default. Keep it that way while you're learning, work inside a dedicated project folder, and use Git so you can undo changes.

What languages does Claude Code support?

All mainstream languages and frameworks. For beginners building web apps, TypeScript with Next.js is a reliable default.