Claude Code Tutorial: The Complete Beginner's Guide (2026)

This is the complete Claude Code tutorial for beginners — no coding experience required. By the end you’ll know how to build and deploy full-stack web applications, extend Claude with skills, and connect it to third-party services via MCP. I’ve also put together a companion worksheet with every link, command, and prompt from the video.

1. Installation & Setup

Node.js is the engine Claude Code runs on. Install it from nodejs.org — the site detects your OS automatically. Copy the install command, open your terminal (Mac: ⌘ Space → terminal; Windows: Start → PowerShell → right-click → run as admin), paste it in and wait.

Confirm it worked:

node
# You should see a > prompt. Press Ctrl+C to exit.

Then install Claude Code:

npm install -g @anthropic-ai/claude-code

Confirm with claude — you should enter the Claude Code interface. Press Ctrl + C to exit.

Finally, Claude Code requires a paid subscription. The free tier isn’t supported. Sign in at claude.ai, find Adjust Plan, and pick the cheapest tier (~£18/month at time of writing).

2. Terminal Basics

The terminal maps directly to your file system — it’s the same files and folders you see in Finder or Explorer, just accessed with text commands. Claude Code lives here because it gives the AI access to everything, not just what an app UI exposes.

Command	What it does
`clear`	Clears the screen
`pwd`	Shows the current directory
`ls` / `ls -la`	Lists files (including hidden ones)
`cd documents`	Changes into a folder
`cd ..`	Goes back one level
`mkdir my-folder`	Creates a new folder
`open .`	Opens current folder in Finder (Mac)
`explorer.exe .`	Opens current folder in Explorer (Windows)

The ~ you’ll see on your prompt is a shortcut for your home folder. The terminal always opens there.

3. Your First Claude Code Session

Create a folder, then start Claude inside it:

mkdir claude-beginner
cd claude-beginner
claude

On first launch, choose a colour theme and log in with your subscription account — a browser window will open to authorise it. Once you’re in, use / to access slash commands:

/model — view and switch models
/mcp — manage MCP server connections
? — keyboard shortcuts

4. Choosing the Right Model

Model	Speed	Rate limit impact	Best for
Haiku	Fastest	Lowest	Simple pages, quick prototypes
Sonnet	Balanced	Mid	Most projects — the default, and the right starting point
Opus	Slowest	Highest	Complex apps where Sonnet keeps making mistakes

Start on Sonnet. Drop to Haiku if you’re hitting rate limits and happy with results. Upgrade to Opus only when you need better reasoning — and expect to hit your monthly limit faster.

/model

5. Build Your First App (Demo #1)

Inside Claude Code, use ! to run terminal commands without exiting:

!mkdir app1
!cd app1

Then ask:

Create a to-do list app with add/delete functionality

Claude writes the code and creates index.html. Open it:

!open .

Double-click index.html to launch it in your browser. To add a feature, stay in the same conversation:

Add the ability to set a date and time deadline for each task

Claude reads the existing code and makes the changes. Data saves to local browser storage — it only persists on your machine, which is fine at this stage.

6. Build a Premium Website (Demo #2)

Create a new folder:

!cd ..
!mkdir app2
!cd app2

Rather than front-loading the whole brief yourself, let Claude ask:

Create a landing page for a marketing company. 
But before you begin, ask questions to create the best possible design.

Use Ctrl + J for a new line without submitting. Claude will ask about the company name, colours, copy, call to action — exactly like briefing a real developer. The more context you provide, the better the result.

7. Agent Skills Explained

A skill is a text file containing instructions (sometimes code) that tell Claude how to do a specific thing — design like a senior designer, write cold emails, handle unusual file formats, and so on.

The clever part is progressive disclosure: Claude Code only sends a skill’s name and description with every message. When your prompt matches the skill’s trigger conditions, it requests and injects the full content. That means you’re not wasting tokens on irrelevant instructions.

Anthropics publishes an official set of skills on GitHub. The frontend-design skill is a good first one — it instructs Claude to produce distinctive, production-grade UI rather than generic markup.

8. Install and Use Agent Skills

Install skills outside of Claude Code:

# Exit Claude Code first (Ctrl+C twice), then:
mkdir app3 && cd app3

npx skills add anthropics/skills

Select the skill with arrow keys + spacebar, choose Claude Code as the harness, and install to project scope (not global — you don’t want every project inheriting skills they don’t need).

Start Claude and check:

/skills

Then trigger the skill naturally:

Build me a simple landing page

You’ll see a confirmation that the skill was loaded. The result — better typography, spacing, colour choices, hover effects — shows the difference between a vague prompt and one backed by structured design guidelines.

Caution: Only install skills you’ve read and trust. Skills can contain executable code, and having too many active at once degrades output quality and burns tokens unnecessarily.

9. CLAUDE.md

claude.md is a markdown file at the root of your project. Its contents are sent to the model at the start of every Claude Code session — a standing brief for that project.

Use it for things that are non-obvious to the model and apply to every session: currency conventions, files the AI shouldn’t touch, team-specific patterns that aren’t standard. Keep it short — it loads every time, so every unnecessary line costs tokens.

Don’t use it for: things your prompting already covers, information meant for humans (put that in README.md), or anything a skill already handles. Beginners almost certainly don’t need one yet.

10. MCP

Model Context Protocol (MCP) lets Claude Code talk to third-party services: Gmail, Notion, Google Maps, your browser, databases, and more.

The architecture is straightforward:

Claude Code (MCP client) → MCP server (on your machine) → Third-party API

The MCP server is a local translation layer — it converts API responses into something Claude can understand and act on. Despite the word “server,” it runs on your computer, not in the cloud.

You can do anything the underlying API permits: read and reply to emails, scrape business data, create tasks in your project management tool, fetch data from multiple sources, schedule recurring jobs.

Demo: Chrome DevTools MCP

This server lets Claude Code control and inspect Chrome directly from the terminal.

# Exit Claude Code, then:
mkdir app4-mcp && cd app4-mcp

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

claude mcp list  # confirm it's registered

Open Claude Code, then:

/mcp

Select chrome-dev-tools to see the 29 available tools. Then ask:

Open https://your-website.com and run a performance audit. 
Give me the top 5 actionable items to hand to my developer.
Save the to-do list to a markdown file.

Claude opens Chrome, runs the audit, writes up the findings, and saves a markdown file to your project folder. The kind of audit a developer would charge for — done in a few minutes through chat.

11. Putting It All Together (Demo #3)

Accounts you’ll need

Service	Purpose
GitHub	Cloud storage for code
GitHub Desktop	GUI for commits and pushes
VS Code	Code editor
Supabase	Database, auth, file storage
Vercel	Hosting and automated deployment

Workflow: repo first, then code

Create the repo on GitHub (New → name it → private → Create repository)
Clone it locally via GitHub Desktop (Add → Clone repository)
Navigate to that folder in your terminal, then open Claude Code

cd claude-beginner/freelancer-hub
claude

Bypass permission prompts

For a big build, having Claude ask permission for every file write gets tedious. Tell it:

Allow Claude Code to bypass permissions in this workspace

Specify “this workspace” — it should write to .claude/settings.json inside your project, not to your home directory.

The build

Copy your initial prompt and let Claude ask clarifying questions before it starts building. For the demo app (a freelancer-client scoping tool), the tech stack is:

Next.js — frontend and backend in one repo, one deployment
Shadcn UI — pre-built, accessible components; fewer tokens spent generating UI from scratch
Supabase — database, auth, and storage in one platform
Vercel — automatic deployment on every GitHub push

Environment variables

Claude will generate a .env.local.example file. Copy it:

cp .env.local.example .env.local

Fill in the four keys — Supabase URL, Supabase publishable key, Supabase secret key, and your Anthropic API key from console.anthropic.com. The .gitignore file already excludes .env.local from commits, so your keys are safe.

One common mismatch: Claude Code sometimes generates code using legacy Supabase variable names (ANON_KEY) while the Supabase dashboard now shows newer names (PUBLISHABLE_KEY). If you see connection errors, just tell Claude:

You're referencing legacy Supabase variable names. Please update to use publishable and secret keys.

Run locally

npm run dev

Open localhost:3000. You’ll have working login, project creation, client intake, and AI-generated proposals.

Common issue: Supabase limits email confirmations to two per hour on the free tier. If signup fails, go to Supabase → Authentication → Sign in / Providers and disable Confirm email. Re-enable it (with a proper SMTP provider like resend.io) before you ship.

Deploy to Vercel

Commit your working build in GitHub Desktop, push to GitHub, then in Vercel:

New Project → Import from Git → select your repository
Vercel auto-detects Next.js
Add your environment variables under Environment Variables
Click Deploy

Within a minute you’ll have a live URL. Real users, same Supabase database, automatically updated on every push.

12. Bonus: When Things Go Wrong

The LLM is probabilistic — you won’t always get what you expected. When something breaks:

Be specific: “When I click Submit on the signup page, I get this error: [paste error]”
Check the console: ⌘ Option J (Mac) / Ctrl Shift J (Windows). Copy the error output and paste it directly into Claude Code.
Commit often: Before Claude makes changes, commit your last working state. It makes bugs much easier to isolate.

13. Bonus++: Cleanup!

Want to revert your system back to where you started? Here’s everything we installed, in one place:

# Claude Code
npm uninstall -g @anthropic-ai/claude-code

# Node.js
nvm ls                        # list installed versions
nvm uninstall <version_number> # remove node

# Skills and MCP
# Simply delete the project folder

# Cancel Claude Pro plan
# claude.ai → Profile → Settings → Cancel plan

Accounts to delete if you want a clean slate:

Vercel: Profile → Settings → Delete Account
GitHub: Profile → Settings → Account → Delete account
Supabase: Profile → Account prefs → Delete account
Claude: Profile → Settings → Account → Delete account