The Complete Guide to Building & Delivering Web Applications

What is This Guide?

This guide will take you from zero to building and deploying real web applications — even if you’ve never written a line of code. We’ll use Claude Code, an AI assistant that lives in your terminal, to do the heavy lifting. You describe what you want in plain English, and it builds it.

By the end of this guide, you’ll know how to:

• Set up a modern development environment on your Mac or Windows computer
• Build real web applications with professional tools like React and TanStack
• Push your code to GitHub so it’s backed up and shareable
• Deploy to the internet so anyone can visit your site
• Use AI-powered workflows to brainstorm, plan, debug, and ship faster

How Does Claude Code Fit In?

Claude Code is your AI development partner. Unlike ChatGPT or other chatbots you use in a browser, Claude Code works directly on your computer. It can read your files, write code, run commands, and build entire projects — all while you describe what you want in plain English.

Think of it as having a very skilled developer sitting next to you.

Opening Your Terminal

This is where everything happens. Your terminal is a text-based interface where you type commands.

• Mac: Press Cmd + Space, type “Terminal”, and hit Enter. Or find it in Applications → Utilities.
• Windows: Search for “PowerShell” in the Start menu and open it.

Accounts You’ll Need

These are the same regardless of whether you’re on Mac or Windows.

GitHub Account

GitHub is where your code lives online. It’s free and essential for saving, sharing, and deploying your projects.

1. Go to github.com and create a free account
2. Choose a username you’re happy with — it becomes part of your profile URL
3. After signup, you’ll want to install the GitHub CLI (see platform-specific sections below) to connect your terminal to your account

Vercel Account

Vercel is where you’ll deploy your websites so anyone can visit them on the internet — for free.

1. Go to vercel.com and sign up using your GitHub account (this links them automatically)
2. That’s it — Vercel will be able to deploy directly from your GitHub repositories

Mac Setup

On Mac, we use Homebrew to install everything. Homebrew is a package manager — think of it like an app store for developer tools.

Homebrew

Install Homebrew by following the instructions at brew.sh. The installer will explain what it’s doing and ask for your password — this is normal.

After installation, follow the instructions the installer prints to add Homebrew to your PATH. You may need to restart your terminal.

Git

Git tracks changes to your files. Claude Code uses it to save your work.

Install via Homebrew: brew install git — or download from git-scm.com

Node.js

Node.js is the engine that runs Claude Code. Think of it like how you need a browser to visit websites — you need Node.js to run Claude Code.

Install via Homebrew: brew install node — or download from nodejs.org (get the LTS version)

pnpm

pnpm is a fast, efficient package manager for Node.js projects. It’s like npm but faster and uses less disk space.

Install via Homebrew: brew install pnpm — or see pnpm.io/installation

After installing, run pnpm setup to configure pnpm’s global bin directory on your PATH. Restart your terminal after this step.

Python (Optional)

Some automation scripts and data tasks use Python. Not required for Claude Code itself, but opens up more possibilities.

Install via Homebrew: brew install python — or download from python.org

GitHub CLI

The GitHub CLI lets you interact with GitHub directly from your terminal — creating repos, pull requests, and more.

Install via Homebrew: brew install gh — or see cli.github.com

After installing, run gh auth login to connect it to your GitHub account.

Vercel CLI

The Vercel CLI lets you deploy projects from your terminal.

Install with pnpm: pnpm add -g vercel — or see vercel.com/docs/cli

After installing, run vercel login to connect it to your Vercel account.

Important: PATH setup on Mac

Some tools require you to copy and paste commands into your terminal to add them to your PATH (so your computer knows where to find them). Watch for this with:

• Homebrew — After installing, the installer prints commands you must copy and paste to add brew to your PATH. Don’t skip this step.
• pnpm — After installing, run pnpm setup and copy any commands it prints.

After any PATH changes, close and reopen your terminal for them to take effect. If a command like brew or pnpm gives you “command not found” after installing, this is almost always the fix.

Windows Setup

On Windows, we use winget (built into Windows 11) or Chocolatey to install tools. If you’re on Windows 10, you may need to install winget first from the Microsoft Store.

Git

Download and install from git-scm.com/downloads/win. During installation, accept the default settings.

Or with winget: winget install Git.Git

Node.js

Download the LTS version from nodejs.org. Run the installer and accept the defaults.

Or with winget: winget install OpenJS.NodeJS.LTS

pnpm

See pnpm.io/installation for Windows-specific instructions.

Or with npm (after Node.js is installed): npm install -g pnpm

After installing, run pnpm setup in PowerShell to configure pnpm’s global bin directory on your PATH. Restart PowerShell after this step.

Python (Optional)

Download from python.org/downloads. Important: During installation, check the box that says “Add Python to PATH.”

Or with winget: winget install Python.Python.3.12

GitHub CLI

Download from cli.github.com.

Or with winget: winget install GitHub.cli

After installing, run gh auth login in PowerShell to connect it to your GitHub account.

Vercel CLI

Install with pnpm (after Node.js and pnpm are installed): pnpm add -g vercel

See vercel.com/docs/cli for details.

After installing, run vercel login to connect it to your Vercel account.

Important: PATH setup on Windows

Some installers need you to take an extra step so your computer can find the tools:

• Python — During installation, check the box that says “Add Python to PATH.” If you missed it, re-run the installer and select “Modify.”
• pnpm — After installing, run pnpm setup in PowerShell and copy any commands it prints.
• Node.js / Git — The installers handle PATH automatically, but if you get “command not found,” try closing and reopening PowerShell.

After any PATH changes, close and reopen PowerShell for them to take effect.

Installing Claude Code

Follow the official installation instructions at docs.anthropic.com/en/docs/claude-code. Anthropic provides a single install command on their site that handles everything for you.

Run claude --version to verify it’s installed.

When you first launch Claude Code, it will ask you to log in. You can use your Google account, or create an Anthropic account for API access. An API key is only needed if you want to build applications that use Claude’s AI capabilities — for everything else in this guide, the standard login works fine.

Your First Conversation

To start Claude Code, open your terminal and type:

claude

You’ll see a prompt where you can start typing. Try something simple:

What files are in my current folder?

Claude Code will look at your current directory and tell you what’s there. It’s that simple — you just talk to it.

Tips for Talking to Claude Code

Claude Code works best when you’re clear about what you want. Here are some tips:

Be specific about what you want:

• Instead of “make it look better” → “change the background color to light blue and increase the font size to 18px”
• Instead of “fix it” → “the button on the homepage isn’t clickable, can you fix that?”

Describe the end result:

• “I want a website that has a dark theme with a navigation bar at the top”
• “Create a script that finds all .jpg files in my Documents folder and copies them to a new folder called Photos”

It’s okay to iterate:

• “That looks good, but can you make the header bigger?”
• “Actually, let’s change the color scheme to something warmer”

You don’t need to know code:

• Claude Code understands plain English
• You can say “I don’t know what that means” and it will explain

Managing Context

This is something beginners don’t realize at first: Claude Code has a context window — a limit on how much conversation it can “remember” at once. Think of it like a whiteboard. As you work, the whiteboard fills up with everything you’ve discussed. Eventually it gets full, and Claude starts forgetting earlier details.

Here’s how to manage it:

Use /clear when switching topics. If you’ve been working on your homepage and now want to work on something completely different (like a script to organize files), type /clear first. This wipes the whiteboard clean so Claude can focus entirely on the new task without getting confused by old context.

Use /compact when staying on the same task. If you’ve been working on one thing for a while and the conversation is getting long, type /compact. Claude will summarize everything so far into a shorter version, freeing up space while keeping the important context.

Start a new session for new projects. When you switch to a different project folder, exit Claude Code (Escape) and start it fresh in the new folder. Each project deserves a clean slate.

Signs you need to clear or compact:

• Claude starts “forgetting” things you told it earlier
• It repeats work it already did
• Its responses get slower or less focused
• You’re switching from one task to a completely different one

This is normal — it’s not Claude being broken, it’s just running out of whiteboard space. A quick /clear or /compact fixes it immediately.

Skills & Tools

Claude Code has powerful features that make it much more capable than a basic chatbot. This is where it goes from “helpful assistant” to “AI-powered development partner.”

Installing Skills

Skills don’t come built into Claude Code — they’re plugins you install. The most powerful collection is called Superpowers. Here’s how to install it:

1. Open Claude Code in any directory:

claude

2. Tell Claude to install the Superpowers plugin:

Install the superpowers plugin from claude-plugins-official

Or install it manually by adding it to your Claude Code settings. Once installed, all the skills below become available automatically — Claude Code will use them when appropriate, or you can activate them with slash commands.

You can also find and install other skill packs from the community. Think of it like installing apps on your phone — each one adds new capabilities.

Slash Commands

Slash commands are shortcuts you type to quickly do common things. Here are the essential ones:

Key Skills

Skills are pre-built workflows that give Claude Code specialized abilities. Think of them like apps on your phone — each one does something specific really well. You activate them by typing their slash command or by just describing what you want.

Here are the most powerful ones:

Brainstorming (/brainstorming)

Before you build anything, this skill walks you through a collaborative design process. Instead of Claude Code just guessing what you want, it:

• Asks you clarifying questions one at a time
• Proposes 2-3 different approaches with trade-offs
• Shows you visual mockups in your browser so you can pick layouts and styles
• Writes a design spec before any code gets written

This is how professionals work — design first, then build. The brainstorming skill makes sure you and Claude Code are on the same page before a single line of code is written.

Writing Plans (/write-plan)

Once you know what to build, this skill creates a detailed step-by-step implementation plan. It breaks the work into small, testable tasks — each one taking just a few minutes. The plan includes:

• Exact file paths for every file that needs to be created or changed
• Complete code snippets (not vague instructions)
• Test cases to verify each step works
• Git commit points so your progress is saved along the way

Think of it like a recipe — instead of “make a cake,” you get “preheat oven to 350°F, mix 2 cups flour with 1 cup sugar…”

Systematic Debugging (/debug)

When something breaks, this skill prevents the frustrating cycle of random changes and hoping for the best. Instead, it follows a structured approach:

• Reproduces the bug first (makes sure it can actually see the problem)
• Forms a hypothesis about what’s wrong
• Tests the hypothesis with targeted changes
• Verifies the fix doesn’t break anything else

This is how experienced developers debug — methodically, not randomly.

Frontend Design (/frontend-design)

This skill generates polished, production-ready UI components that avoid the generic “AI look.” Instead of the same boring templates every AI spits out, you get:

• Clean interfaces with real design sensibility
• Thoughtful use of color, spacing, and typography
• Components that actually look like a human designer made them
• Responsive layouts that work on all screen sizes

Other Notable Skills

• Test-Driven Development — Writes tests before code, ensuring everything works correctly from the start
• Code Review — Reviews your code for bugs, security issues, and best practices
• Dispatching Parallel Agents — Splits big tasks across multiple AI workers that run simultaneously, finishing faster

What Are MCP Servers?

MCP stands for “Model Context Protocol.” In plain English, MCP servers are plugins that connect Claude Code to other services and tools.

Think of Claude Code as a brain — it can think and write code, but MCP servers give it hands to reach into other systems:

• GitHub MCP server — Create pull requests, manage issues, review code, and interact with your repositories without leaving Claude Code
• Filesystem MCP server — Enhanced file management capabilities beyond basic read/write
• Database MCP server — Query and manage databases directly
• Slack/Discord MCP servers — Send messages and interact with team channels
• Browser MCP server — Let Claude Code see and interact with web pages

You don’t need to set these up right away — they’re there when you’re ready to connect Claude Code to your other tools.

CLAUDE.md Files

A CLAUDE.md file is like a set of instructions you leave for Claude Code. When Claude Code opens a project that has a CLAUDE.md file, it reads it first to understand your project and preferences. Think of it as a note you leave for your AI assistant so it doesn’t have to ask you the same questions every time.

Here’s a simple example:

# My Website Project

This is a personal portfolio website built with HTML, CSS, and JavaScript.

## How to run
Open index.html in a browser, or run `npx serve .`

## Preferences
- Use modern CSS (flexbox, grid) instead of old techniques
- Keep the design minimal and clean
- Always test on mobile sizes

And here’s a more advanced one showing the kind of instructions a power user might write:

# Project Rules

## Stack
- React 19 with TypeScript
- Tailwind CSS for styling
- Vitest for testing

## Conventions
- Always write tests before implementation (TDD)
- Use the brainstorming skill before building new features
- Never modify the database schema without asking first
- Commit after each completed task, not at the end

## How to run
- Dev server: npm run dev
- Tests: npm test
- Build: npm run build

Permission Modes

Claude Code asks for permission before doing certain things — like running commands or editing files. There are different modes:

• Default mode — Claude asks before every action. Safest for beginners. You’ll see exactly what it wants to do before it does it.
• Auto-accept edits — Claude can edit files without asking, but still asks before running commands. Good once you trust it with your code.
• YOLO mode — Claude does everything without asking. Only use this if you’re comfortable and trust the project context. Great for experienced users who want maximum speed.

As a beginner, stick with the default mode. You’ll learn to trust Claude Code’s judgment over time, and then you can relax the permissions.

Building Your First Real Project

Let’s walk through building an actual web application from scratch — not just a simple HTML page, but a modern React app with routing, a professional setup, and automatic deployment. By the end, you’ll have a live website anyone can visit.

We’ll use TanStack Router (a modern React framework), pnpm (a fast package manager), GitHub (to store your code), GitHub Actions (to automatically check your code), and Vercel (to deploy it to the internet).

Don’t worry if those names mean nothing to you — Claude Code handles all of it.

Define Before You Build

Before jumping straight into code, it helps to have Claude create definition documents that describe what your app does and how it works. These markdown files act as a blueprint — Claude reads them throughout the project to stay on track, and you can reference them to make sure the app matches your vision.

The good news: you don’t have to write these yourself. Just describe your idea to Claude and ask it to create them for you. Here’s how:

Start by describing your idea and ask Claude to create a what-it-does.md:

I want to build a personal website with a homepage, about page, and
contact page. Before we start building anything, can you create a file
called what-it-does.md that describes every feature and page in plain
English? Include what each page shows, what users can interact with,
and what the overall experience should feel like.

Claude will create a structured document listing every feature. Review it and tell Claude what to add or change:

That looks good, but I also want a section for my photography hobby
with a photo gallery. And the contact form should show a nice animation
when submitted, not just a plain "thank you" message. Update the file.

Then ask Claude to create a how-it-flows.md:

Now create a how-it-flows.md that walks through the user journey.
What does a visitor do first? What pages do they go to? What actions
can they take? Describe it step by step like you're telling someone
a story of using the app. Also include what should "feel good" about
the experience — things like smooth navigation, responsive design, etc.

Why does this matter? When Claude has these files in your project, it reads them before making decisions. Instead of guessing what you want, it has a clear reference. If something goes wrong later, you can point back to these files: “This doesn’t match what we defined in what-it-does.md.”

Finally, question Claude on the technical choices. After Claude sets things up, ask:

Why did you choose these specific tools? Are there cheaper or simpler
alternatives? What's the trade-off?

Is this the most efficient way to build this? What would change
if I wanted to keep costs as low as possible?

Walk me through the decisions you made and why. I want to understand
what I'm paying for if this goes to production.

This is how you learn. You don’t need to know what a “framework” is before starting — but by asking Claude to explain its choices, you’ll understand more with each project. The markdown files become your compass, and Claude handles the map.

Step 1: Create Your Project

Open your terminal, navigate to where you want your project, and start Claude Code:

mkdir my-app
cd my-app
claude

Step 2: Tell Claude What to Build

Here’s an example prompt to get started. Notice we’re asking Claude Code to use the frontend-design skill — this is a special workflow that generates polished, production-ready UI instead of the generic look most AI tools produce:

Use the official TanStack create CLI to scaffold a new TanStack Start
application with the basic template. Use pnpm as the package manager.
After the project is scaffolded, use the /frontend-design skill to
build out the app with TypeScript and Tailwind CSS.

The app should have:
- A homepage with a welcome message and a clean modern design
- An "About" page with some placeholder text
- A "Contact" page with a simple contact form
- A shared navigation bar that highlights the current page
- A nice footer

Make it look professional — not like a generic template. Use a clean color
scheme with good typography. I want it to look like a real designer made it.

What Happens Next

Claude Code will:

1. Scaffold the project — using TanStack’s official CLI (pnpm create @tanstack/app) which sets up the recommended project structure
2. Install packages with pnpm — you’ll see it running pnpm install
3. Create all the pages — homepage, about, contact with routing between them
4. Style everything — using Tailwind CSS for a polished look
5. Explain what it’s doing — so you can follow along

Step 3: See It Running

Once Claude Code is done, ask it:

Start the dev server so I can see the app in my browser

It will run something like pnpm dev and tell you to open http://localhost:3000. You’ll see your app running live!

Step 4: Make It Yours

Now iterate. Ask for changes in plain English:

Change the homepage to have my name "Alex" and a short bio about
loving hiking and photography. Use a warm color palette.

Add a dark mode toggle in the navigation bar

Make the contact form actually look like it would send a message —
add a success animation when you click submit

Add some page transition animations when navigating between pages

Step 5: Push to GitHub

Now let’s save your code to GitHub so it’s backed up and ready to deploy:

Set up git for this project, create a GitHub repository called "my-app",
and push everything to it. Make the repo public.

Claude Code will:

1. Initialize a Git repo
2. Create the repo on GitHub using the GitHub CLI
3. Push all your code up

Step 6: Set Up GitHub Actions

GitHub Actions automatically checks your code every time you push changes — it makes sure nothing is broken. Ask Claude:

Set up GitHub Actions with a workflow that:
- Runs on every push and pull request
- Installs dependencies with pnpm
- Runs the TypeScript type checker
- Runs the build to make sure it compiles
- Name the workflow "CI"

Claude Code will create a .github/workflows/ci.yml file, commit it, and push. Now every time you make changes, GitHub automatically verifies everything works.

Step 7: Deploy to Vercel

Let’s put your app on the internet so anyone can visit it. Ask Claude to walk you through the Vercel setup:

Help me deploy this project to Vercel. Walk me through the steps:
1. Connect Vercel to my GitHub repo
2. Configure the build settings for a TanStack Start app using pnpm
3. Set it up so it automatically deploys when I push to main
Explain each step as we go.

Claude Code will guide you through the process. Here’s what to expect:

1. Import your repo — Go to vercel.com/new, select your GitHub repo
2. Configure build settings — Claude will tell you the right settings:
   • Framework Preset: May auto-detect, or you’ll set it manually
   • Build Command: Usually pnpm build
   • Output Directory: Claude will tell you based on your project setup
   • Install Command: pnpm install
3. Deploy — Click deploy and wait a minute or two
4. Get your URL — Vercel gives you a URL like my-app.vercel.app

If anything looks wrong after deploying, ask Claude:

The Vercel deployment shows an error. Here's what I see: [paste the error].
Can you help me fix the build settings?

From now on, every time you push code to GitHub, Vercel automatically redeploys your site with the latest changes.

Step 8: Save Your Work (Every Time)

This is an important habit: after every change you’re happy with, tell Claude to commit and push.

Commit everything and push to GitHub

Or just type /commit — Claude will write a descriptive commit message, save your work, and push it to GitHub. This:

• Backs up your code so you never lose work
• Triggers GitHub Actions to check everything is working
• Triggers Vercel to deploy the latest version

Rule of thumb: If you’d be upset losing what you just built, commit and push. Do it often — after every feature, fix, or change you like. You can’t commit too often.

Step 9: Keep Building

Now you have a professional setup — your app automatically:

• Gets checked by GitHub Actions when you push code
• Deploys to Vercel when changes land on the main branch

You can keep adding features by just talking to Claude Code:

Add a blog section where I can write posts in markdown files

Add a photo gallery page that displays images in a grid with a lightbox

Make the site fully responsive for mobile devices

After each change, tell Claude to commit and push — your site updates automatically.

The Full Loop

This is what modern development looks like:

1. Describe what you want → Claude Code builds it
2. Preview locally → See it in your browser at localhost
3. Commit and push → Tell Claude to “commit and push to GitHub”
4. Automatic checks → GitHub Actions verifies nothing is broken
5. Automatic deploy → Vercel puts it live on the internet
6. Iterate → Go back to step 1

You just went from zero to a deployed web application with professional CI/CD. That’s real software engineering — and you did it by typing in English.

Coming Back to Your Project Later

You closed your terminal. It’s the next day. How do you pick up where you left off?

1. Open your terminal

• Mac: Cmd + Space, type “Terminal”
• Windows: Search for “PowerShell”

2. Navigate to your project folder

Your project lives where you created it. If you put it on your Desktop:

cd ~/Desktop/my-app

Not sure where it is? You can search:

# Mac/Linux — find a folder by name
find ~ -type d -name "my-app" 2>/dev/null

# Or just check common locations
ls ~/Desktop
ls ~/Documents
ls ~/projects

3. Start Claude Code

claude

Claude Code will read your project files and pick up the context. If you have a CLAUDE.md file, it knows exactly what the project is about.

4. Check the status

Good first prompts when returning to a project:

What's the current state of this project? Summarize what we have so far.

Run the dev server so I can see where we left off.

Are there any issues or errors in the current code?

Tip: Keep your projects organized. Create a folder like ~/projects or ~/Desktop/projects and put all your project folders there. That way you always know where to look:

cd ~/projects
ls

You’ll see all your projects listed. Just cd into the one you want to work on and start Claude Code.

Things You Can Build Right Now

Here are concrete examples you can try. Each one includes exactly what to type and what to expect.

Build a Landing Page

What to say:

Create a professional landing page for a dog walking business called "Happy Paws."
Include a hero section with a catchy headline, a services section with pricing
(30-min walk $20, 60-min walk $35, puppy visits $25), customer testimonials
(make up 3 realistic ones), and a contact form. Use a warm, friendly color scheme
with greens and earth tones.

What happens: Claude Code creates HTML, CSS, and possibly JavaScript files. You’ll get a fully styled, responsive landing page ready to open in your browser.

What you get: A professional-looking page you could actually use for a real business.

Automate File Organization

What to say:

Write a script that organizes my Downloads folder. It should:
- Move all .pdf files into a "Documents" subfolder
- Move all .jpg and .png files into a "Images" subfolder
- Move all .mp4 and .mov files into a "Videos" subfolder
- Create a log file that lists what was moved where
- Don't move anything if the subfolder already has a file with the same name

Use the ~/Downloads folder on my Mac.

What happens: Claude Code writes a shell script or Python script. It will ask before running it so you can review what it does.

What you get: A reusable script you can run anytime your Downloads folder gets messy.

Work With Spreadsheet Data

What to say:

I have a CSV file called sales.csv with columns: Date, Product, Quantity, Price.
Can you:
1. Read the file and show me a summary (total sales, best selling product, busiest month)
2. Create a new CSV with monthly totals
3. Tell me if there are any data issues (missing values, weird numbers)

What happens: Claude Code reads your CSV, analyzes the data, creates summary files, and reports any issues — all without you needing to know Python or Excel formulas.

What you get: Data insights and a clean summary file, ready to use.

Create a Utility Script

What to say:

Create a script that goes through a folder of photos and renames them based on
the date they were taken. Use the format YYYY-MM-DD_original-name.jpg.
If the photo doesn't have date information, put it in a "no-date" subfolder instead.

What happens: Claude Code writes a Python script that reads photo metadata (EXIF data) and renames files accordingly.

What you get: A script that turns IMG_4392.jpg into 2026-01-15_IMG_4392.jpg — much easier to find photos later.

Build a Simple Tool

What to say:

Build me a simple recipe organizer. I want to:
- Add recipes with a name, ingredients list, and instructions
- Save them to a local file so they persist
- Search my recipes by name or ingredient
- Make it work from the terminal (no need for a website)

What happens: Claude Code builds a command-line tool, probably in Python or Node.js, that manages your recipes in a JSON file.

What you get: A personal recipe app you can run anytime from your terminal.

Tips for Getting Good Results

1. Be specific about inputs and outputs — “read this file” and “create this file” are clearer than “work with my data”
2. Mention edge cases — “don’t overwrite existing files” prevents accidental data loss
3. Start small, then expand — get the basic version working before asking for advanced features
4. Give context — “I’m on a Mac” or “the file uses commas as separators” helps Claude Code make the right choices

Quick Reference

Essential Commands

Prompting Cheat Sheet

Do:

• Describe what you want the end result to look like
• Mention specific details (colors, sizes, file names)
• Say “I don’t know” when you’re unsure — Claude Code will explain options
• Iterate — ask for changes one at a time
• Give context about your setup (“I’m on a Mac”, “I’m using Python 3”)

Don’t:

• Use vague requests like “make it better” without saying how
• Try to give Claude Code the entire project at once — break it into pieces
• Worry about using technical language — plain English works great
• Assume it “remembers” from a previous session — each session starts fresh (unless you have a CLAUDE.md file)

Common Error Messages

“Command not found: claude” Claude Code isn’t installed or isn’t in your PATH. Try reinstalling using the instructions at docs.anthropic.com/en/docs/claude-code.

“API key not found” or “Authentication error” You need to set up your Anthropic API key. Claude Code will walk you through this on first launch, or you can set it manually:

export ANTHROPIC_API_KEY=your-key-here

“EACCES: permission denied” You’re trying to access files you don’t have permission for. Try adding sudo before the command, or change the file permissions.

“Rate limit exceeded” You’ve sent too many requests too quickly. Wait a minute and try again. This is normal during heavy usage.

What to Say When…

Keyboard Shortcuts

Useful Links

• Claude Code Documentation — Official docs with detailed guides
• Anthropic Console — Manage your API key and usage
• Node.js Download — Install Node.js if you don’t have it

Terminal Basics

The terminal can feel intimidating at first, but you really only need a handful of commands to get started. These work on Mac, Windows (PowerShell), and Linux.

Navigating Around

pwd — Where Am I?

Prints the full path of the folder you’re currently in.

pwd

Output: /Users/alex/Desktop/my-app

Think of it as asking “what’s my current address?”

ls — What’s in This Folder?

Lists all the files and folders in your current location.

ls

Output:

index.html  styles.css  images/  README.md

On Mac/Linux you can use ls -la to see hidden files and more details. On Windows PowerShell, ls works the same way.

cd — Move to a Different Folder

Changes your current directory (folder). This is how you navigate around your computer in the terminal.

# Go into a folder
cd my-app

# Go up one level (back to the parent folder)
cd ..

# Go up two levels
cd ../..

# Go to your home folder
cd ~

# Go to a specific path
cd ~/Desktop/projects/my-app

Tip: You can press Tab to autocomplete folder names. Type cd my- and press Tab — the terminal will fill in my-app for you.

clear — Clean Up the Screen

Clears all the text from your terminal. Doesn’t delete anything — just gives you a fresh screen.

clear

Creating and Managing Files

mkdir — Create a New Folder

Makes a new directory (folder).

# Create a single folder
mkdir my-project

# Create a folder and all parent folders in one go
mkdir -p projects/websites/my-app

touch — Create a New Empty File

Creates a new empty file (Mac/Linux). On Windows PowerShell, use New-Item instead.

# Mac/Linux
touch README.md

# Windows PowerShell
New-Item README.md

rm — Delete a File

Removes a file. Be careful — there’s no trash can. Deleted files are gone.

# Delete a single file
rm old-file.txt

# Delete a folder and everything inside it
rm -rf old-project

Warning: rm -rf is powerful and permanent. Double-check what you’re deleting before running it. Never run rm -rf / — that would try to delete everything on your computer.

cp — Copy a File

Copies a file or folder to a new location.

# Copy a file
cp index.html backup-index.html

# Copy an entire folder
cp -r my-app my-app-backup

mv — Move or Rename a File

Moves a file to a new location, or renames it.

# Rename a file
mv old-name.txt new-name.txt

# Move a file to a different folder
mv report.pdf ~/Documents/

Viewing File Contents

cat — Show a File’s Contents

Prints the entire contents of a file to your terminal.

cat README.md

Good for short files. For longer files, the text will scroll past quickly.

head and tail — See the Beginning or End

Shows just the first or last few lines of a file.

# First 10 lines
head package.json

# Last 20 lines
tail -20 server.log

Useful Combos

Here are some common patterns you’ll use regularly:

# Create a new project and go into it
mkdir my-project && cd my-project

# See where you are and what's in the folder
pwd && ls

# Go back to where your projects live
cd ~/Desktop/projects

Command Cheat Sheet

Don’t Worry About Memorizing

You don’t need to memorize all of these. The ones you’ll use 90% of the time are:

• cd — to move between folders
• ls — to see what’s in a folder
• mkdir — to create new project folders

For everything else, you can always ask Claude Code: “How do I [thing I want to do] in the terminal?” and it will tell you the exact command.