How to Use Claude Code: A Step-by-Step Tutorial

Most Claude Code tutorials walk you through the docs and call it a day. I've taught over 100 people to use Claude Code, from experienced developers to product managers who'd never opened a terminal. Here's the step-by-step guide I wish someone had written, including every mistake beginners make and how to avoid them.

Step 1: Install Claude Code

Installation takes about 2 minutes. You have 2 options:

Option A: npm (works everywhere)

Open your terminal and run:

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

This requires Node.js. If you don't have it, install it from nodejs.org first. Download the LTS version, run the installer, done.

Option B: Homebrew (Mac only)

brew install claude-code

Either method works. If you're on a Mac and already use Homebrew, go with that. Otherwise, npm is universal.

Step 2: Your First Session

Create a folder for your project and navigate to it:

mkdir my-project
cd my-project

Then start Claude Code:

claude

The first time you run it, Claude will ask you to authenticate with your Anthropic account. Follow the prompts. Takes 30 seconds.

Once you're in, you'll see a simple text prompt. This is where you type your instructions. Try something simple:

Create a simple HTML page that says "Hello World" with a dark background and centered text

Watch what happens. Claude creates an index.html file and writes the HTML, CSS, everything needed. It tells you what it did and why. Open the file in your browser. You've just built your first thing with Claude Code.

Step 3: Learn to Iterate

Building with Claude Code isn't about nailing it on the first prompt. It's about iterating quickly. After your Hello World page, try:

• "Add a button that changes the text to a random greeting"
• "Make it look more professional. Add a gradient background and better typography"
• "Add an input field where I can type my name and it greets me personally"

Each prompt builds on the previous one. Claude remembers the conversation and your project state. You don't need to re-explain what you've built. Just describe what you want next.

This is the core skill of using Claude Code: describing what you want, reviewing the result, and refining. It's more like giving feedback to a designer than writing code.

Step 4: Key Concepts That Make You Better

CLAUDE.md: Your Project's Instruction Manual

Create a file called CLAUDE.md in your project root. This tells Claude about your project before every conversation. Here's a simple example:

# My Project

## Stack
- Next.js 14 with App Router
- Tailwind CSS for styling
- Supabase for database

## Conventions
- Use TypeScript for all files
- Use server components by default
- Keep components in app/components/

Without a CLAUDE.md, Claude guesses your preferences. With one, it follows your conventions from the first prompt. This is the single biggest productivity boost I teach. Most students see an immediate improvement in output quality after adding one.

Plan Mode: Think Before Building

For complex tasks, use plan mode. Toggle it by pressing Shift+Tab, or prefix your prompt:

Plan how you'd build a user authentication system with email signup, login, and password reset

Claude outlines its approach: which files to create, what libraries to use, how the pieces connect. You review the plan, suggest changes, then tell Claude to execute.

When to use plan mode: any task that involves more than 3 or 4 files or has multiple connected pieces. Authentication, dashboards, multi-step forms, API integrations. Plan first, build second.

Skills: Reusable Instructions

Skills are markdown files in your project's .claude/skills/ directory that give Claude specialized instructions. For example, a frontend.md skill might say:

# Frontend Skill

- Always use Tailwind CSS
- Follow our dark theme (bg-[#0a0a0a], text-white)
- Make all pages responsive
- Test with Playwright before presenting

When Claude handles frontend work, it reads this skill and follows the instructions. You write the skill once and get consistent results forever.

Slash Commands: Quick Actions

Claude Code has built-in commands that make common tasks faster:

• /clear: clear the conversation (fresh start, keeps project context)
• /compact: summarize the conversation to save context window space
• /help: see all available commands

Step 5: Your First Real Project

Once you've practiced with small tasks, build something real. Here's a project that covers most of the fundamentals: a personal website.

Create a personal portfolio website with:
- A hero section with my name and a one-line bio
- An "About" section with a paragraph about me
- A "Projects" section with 3 project cards
- A contact form that logs submissions to the console
- Dark theme, modern design, fully responsive

This single prompt will generate a complete, working website. From there, iterate:

• "Use my real information: [your name, bio, projects]"
• "Add smooth scroll animations when sections come into view"
• "Deploy this to Vercel" (Claude will walk you through it)

By the end, you'll have a deployed personal site, built entirely by describing what you want.

Common Mistakes Beginners Make

1. Being too vague

Bad: "Make it look better"

Good: "Increase the spacing between sections, make the heading text larger, and add a subtle gradient background"

Claude can work with vague instructions, but specific ones get better results faster.

2. Giving implementation instructions instead of outcomes

Bad: "Create a useState hook for the form data and a handleSubmit function that calls the API"

Good: "Add a contact form that sends the data to our API and shows a success message"

Unless you know exactly what you want at the code level, describe the what and let Claude figure out the how.

3. Trying to do everything in one prompt

Bad: A 500-word prompt describing an entire application with authentication, payments, dashboard, admin panel, and email notifications.

Good: Start with the core feature. Get it working. Then add the next feature. Then the next.

Claude works better when you build incrementally. Each step builds on a working foundation. Trying to build everything at once leads to more errors and harder debugging.

4. Not using CLAUDE.md

I see this with almost every beginner. They spend 3 sessions re-explaining their tech stack and preferences. Write a CLAUDE.md file. Do it now. Even a 5-line file makes a massive difference.

5. Accepting the first result without iterating

The first output is a starting point, not the finished product. The magic of Claude Code is how fast you can iterate. Don't settle. Keep refining until it's exactly what you want.

What I Wish Someone Told Me on Day 1

• Start with git. Run git init before you start building. Claude Code works beautifully with git. You can always roll back if something goes sideways.
• Read what Claude writes. Even if you don't understand the code, read Claude's explanations of what it did and why. This builds intuition fast.
• Use it every day. The skill compounds. Day 1 you're building hello world pages. Day 7 you're building full applications. The difference is reps, not tutorials.
• Don't be afraid to break things. If Claude makes a mistake, say "that broke, undo it" or "revert the last change." It'll fix it.
• Join a community. The Claude Code Discord and the broader AI coding community are incredibly helpful for tips, troubleshooting, and inspiration.

If you want to understand more about the tool itself, read what Claude Code is or see how it compares to Cursor.