Claude Code — First Contact

Topics

• Installing Claude Code
• Authentication: API key vs. Claude Pro/Max subscription
• Anatomy of a session: prompt → plan → execute → review
• Plan mode: always start here
• Reading diffs: understanding what Claude changed
• Essential commands: /help, /compact, /clear, /model, /context
• Introduction to CLAUDE.md
• Understanding context window and token usage

Activities

• Install Claude Code and authenticate
• Run your first session: ask Claude to build a simple to-do list app
• Practice Plan mode: describe what you want before Claude codes
• Review a diff and understand every change
• Use /compact during a long session
• Create your first CLAUDE.md file

Skills You'll Gain

Claude Code basics, Plan mode, diff reading, /compact, CLAUDE.md creation

Learning Objectives

By the end of this week, you will be able to:

1. Install and authenticate Claude Code on your computer
2. Explain the session model: prompt → plan → execute → review
3. Write effective prompts that give Claude clear context and constraints
4. Read a diff to understand exactly what Claude changed in your files
5. Use essential slash commands (/help, /compact, /clear, /model) and create a CLAUDE.md file

Lesson

What Is Claude Code?

Claude Code is an AI coding assistant that lives in your terminal. Unlike ChatGPT or Claude.ai (where you chat in a browser window and copy-paste code), Claude Code can directly read, write, and run code on your actual computer. When you ask Claude Code to "create a to-do list app," it does not just show you the code — it creates the actual files, writes the actual code, and can even run it for you.

Think of it this way:

• Claude.ai = a smart friend you text. They give advice, but you do all the work.
• Claude Code = a smart colleague sitting at your computer. You describe what you want, they do the work, and you review it.

This makes Claude Code incredibly powerful — and is also why we spent Weeks 1 and 2 learning the terminal and Git. You need to understand the environment Claude Code works in.

Installing Claude Code

Make sure Node.js is installed (you did this in Week 1). Then run:

$ claude install

If that does not work, you can also install via npm:

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

Verify the installation:

$ claude --version

If you see a version number, you are ready.

Authentication: Getting Permission to Use Claude

Claude Code needs to know you have permission to use it. There are two ways:

1. API Key — A personal password from Anthropic. Go to https://console.anthropic.com, create an account, and generate an API key. Then set it:

$ export ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxxx

1. Claude Pro/Max Subscription — If you have a paid Claude subscription, you can authenticate directly:

$ claude auth login

This opens a browser window where you log in. Once authenticated, Claude Code connects to your account automatically.

Your First Session

Navigate to your project folder and launch Claude Code:

$ cd ~/my-first-project
$ claude

You will see a welcome screen with a blinking cursor. This is where you type your prompts — plain English descriptions of what you want Claude to do.

Try this prompt:

Create a simple HTML page called index.html that says "Hello World"
with a heading and a paragraph describing what this project is about.

Watch what happens. Claude will:

1. Think about what you asked (you might see it planning)
2. Create the file index.html
3. Write the HTML code into it
4. Show you what it did (a diff — the changes it made)

The Session Model: Prompt → Plan → Execute → Review

Every interaction with Claude Code follows this cycle:

   You write        Claude thinks       Claude makes       You check
   a prompt    →    and plans       →   the changes   →    the result

   "Create a        "I'll create        Creates files,      You see a diff
    to-do app"      index.html with     writes code,        showing what
                    React components"   runs commands        changed

Step 1: Prompt — You describe what you want in plain English. Be specific:

• Vague: "Make an app" (Claude does not know what kind)
• Better: "Create a to-do list where I can add and remove tasks"
• Best: "Create a to-do list using HTML and JavaScript where I can add tasks with a text input, mark them as complete with a checkbox, and delete them with a button"

Step 2: Plan — Claude thinks about your request and decides what to do. In Plan mode (which we will cover next), it tells you its plan before doing anything.

Step 3: Execute — Claude creates files, writes code, and runs commands on your computer.

Step 4: Review — Claude shows you a diff — a before-and-after view of what changed. You approve or ask for changes.

Plan Mode: Think Before You Code

Plan mode is one of the most important features of Claude Code. When you start in Plan mode, Claude tells you what it plans to do before making any changes. You can review the plan, ask questions, and request modifications before Claude writes a single line of code.

To enter Plan mode, use the slash command:

/plan

Or start Claude with Plan mode:

$ claude --permission-mode plan

In Plan mode, Claude will analyze your request and present a plan like:

I'll create a to-do list app. Here's my plan:

1. Create index.html with the page structure
2. Add a text input and "Add Task" button
3. Create a task list that displays tasks
4. Add JavaScript to handle adding, completing, and deleting tasks
5. Style it with CSS to look clean and professional

Shall I proceed?

You can then say "yes," or modify the plan: "Sounds good, but use a modern design with rounded corners and a dark mode."

Rule of thumb: Always use Plan mode for anything non-trivial. It prevents Claude from going in a direction you did not want.

Reading Diffs: Understanding What Changed

When Claude makes changes, it shows you a diff. This is the same format Git uses:

+ Added lines appear in green with a + prefix
- Removed lines appear in red with a - prefix
  Unchanged lines appear normally (for context)

Example diff:

--- a/index.html
+++ b/index.html
@@ -1,3 +1,5 @@
 <html>
   <body>
-    <h1>Hello</h1>
+    <h1>Hello World</h1>
+    <p>This is my first project.</p>
   </body>
 </html>

Reading this diff: The line <h1>Hello</h1> was removed (red), and two new lines were added (green): <h1>Hello World</h1> and <p>This is my first project.</p>.

Learning to read diffs is essential. Every time Claude makes a change, you should read the diff to understand what happened. If something looks wrong, you can say "Undo that" or "Change the heading back."

Essential Slash Commands

Slash commands are special instructions you type during a Claude Code session. They start with /:

The Context Window: Claude's Working Memory

Claude has a limited "working memory" called the context window. Think of it like a desk — Claude can only keep so many documents on the desk at once. As the conversation gets longer, older information falls off the desk.

This is why /compact is important. When you run /compact, Claude summarizes the conversation so far, freeing up space on the desk without losing important information.

Signs you need to use /compact:

• Claude starts forgetting things you told it earlier
• Claude repeats work it already did
• The /context command shows usage above 80%

CLAUDE.md: Project Memory

CLAUDE.md is a special file that Claude reads at the start of every session. It is your project's instruction manual for Claude. Create one with:

/init

Or create it manually. Here is a starter template:

# CLAUDE.md

## Project Overview
This is a to-do list application built during the Claude Code Mastery course.

## Tech Stack
HTML, CSS, JavaScript

## Commands
- Open index.html in a browser to view the app
- No build step needed

## Architecture
- index.html — Main page with app structure
- style.css — Styling
- app.js — Application logic

## Conventions
- Use clear variable names
- Add comments explaining complex logic

Why does this matter? Without CLAUDE.md, Claude starts every session knowing nothing about your project. With CLAUDE.md, Claude immediately understands what your project is, how it is organized, and what conventions to follow.

Token Usage and Cost

Every interaction with Claude uses tokens — small units of text. Longer conversations use more tokens, and tokens cost money (if you are on API billing). Use /cost to check:

/cost
Session tokens: 12,450
Estimated cost: $0.12

Tips for managing token usage:

• Use /compact during long sessions
• Be specific in your prompts (less back-and-forth = fewer tokens)
• Use Plan mode to avoid wasted work
• Switch to a cheaper model (Haiku) for simple tasks with /model

Practice Exercises

Exercise 1 (Guided): Your First Claude Code Session

Follow these steps exactly:

$ cd ~/my-first-project
$ claude

At the Claude prompt, type:

Create a file called index.html with a simple webpage that has:
- A heading that says "My First Project"
- A paragraph introducing yourself
- A list of three things you are learning

After Claude creates the file:

1. Read the diff Claude shows you — identify what was added
2. Type /cost to see token usage
3. Type /context to see context window usage
4. Open the file in a browser to see the result (on Mac: open index.html)

Verification: index.html should exist with the content you described. The browser should display a formatted webpage.

Exercise 2 (Independent): Plan Mode Practice

Goal: Use Plan mode to build a simple to-do list.

1. Start Claude in Plan mode: claude --permission-mode plan
2. Ask: "Create a to-do list app where I can add tasks, mark them complete, and delete them. Use HTML, CSS, and JavaScript in separate files."
3. Review Claude's plan carefully before approving
4. After Claude builds it, test it in your browser
5. Ask Claude to make one improvement (your choice — better styling, a search feature, etc.)

Hints:

• If the plan seems too complex, ask Claude to simplify it
• If you do not understand part of the plan, ask Claude to explain
• After testing, commit your changes with Git: git add . && git commit -m "Add to-do list app"

Verification: Three files should exist (.html, .css, .js). The app should work in the browser. Git log should show a new commit.

Exercise 3 (Challenge): Create Your CLAUDE.md

Write a complete CLAUDE.md for your my-first-project that includes:

• Project overview (what it does)
• Tech stack (what technologies it uses)
• File structure (what each file does)
• How to run the project
• Any conventions you want Claude to follow

Test it by starting a new Claude session and asking: "What do you know about this project?" Claude should be able to describe your project accurately based on CLAUDE.md.

Self-Assessment Quiz

1. What is the difference between Claude.ai and Claude Code?

2. What is Plan mode, and why should you use it?

3. In a diff, what do lines starting with + and - mean?

4. What is CLAUDE.md, and why is it important?

5. When should you use the /compact command?

Answers:

1. Claude.ai is a chat interface in your browser — you type questions and get text responses that you copy-paste manually. Claude Code runs in your terminal and can directly create, edit, and run files on your computer. Claude Code is an active collaborator; Claude.ai is an advisor.

2. Plan mode makes Claude describe its plan before making any changes. You should use it for anything non-trivial so you can review, modify, and approve the plan before Claude writes code. This prevents wasted work and misunderstandings.

3. Lines starting with + are additions (new content that was added). Lines starting with - are deletions (old content that was removed). Lines without a prefix are unchanged context lines.

4. CLAUDE.md is a file in your project root that Claude reads at the start of every session. It tells Claude about your project: what it does, what technologies it uses, how files are organized, and what conventions to follow. Without it, Claude starts each session knowing nothing about your project.

5. Use /compact when your session is getting long and Claude starts to slow down, forget earlier context, or repeat itself. Check with /context — if usage is above 80%, it is time to compact.

Current Model Lineup (February 2026)

• Opus 4.6 leads across agentic coding, computer use, tool use, search, and finance benchmarks. Available in Claude Code since v2.1.32; fast mode enabled in v2.1.36.
• Sonnet 4.5 sets benchmark records in coding, reasoning, and computer use. The default workhorse model. Released alongside the Claude Agent SDK for building custom agents programmatically.
• Haiku 4.5 matches prior state-of-the-art coding with unprecedented speed and cost-efficiency. Used internally by Claude Code for fast subagent operations.

Key takeaway: Switch models mid-session with /model or set ANTHROPIC_MODEL. Use Opus 4.6 for complex architecture, Sonnet 4.5 for everyday coding, Haiku 4.5 for rapid iteration. Fast mode (/fast) is available for Opus 4.6.

Exercise: Run the same prompt with all three models and compare response time, token cost, and output quality. Identify which tasks are "Haiku-appropriate" vs those that need Sonnet or Opus.

References:

• Opus 4.6 | Sonnet 4.5 | Haiku 4.5
• Agent SDK docs

Claude Code Feature Updates (Feb 2026)

Task Management System: A new task management system with dependency tracking was added (v2.1.16). Tasks can be created, updated, and tracked with blockedBy/blocks relationships. Disable with CLAUDE_CODE_ENABLE_TASKS=false to use the old system temporarily.

Auto Memory: Claude now automatically records and recalls memories as it works (v2.1.32). Memories persist in ~/.claude/ and are loaded into the system prompt for future sessions.

Session Resume: On exit, Claude Code now shows a session resume hint so you can continue your conversation later (v2.1.31).

Exercise:

• Toggle /fast mode and compare response speed vs. quality
• Let Claude build up auto memories across a few sessions, then review what it stored in ~/.claude/
• Use the task management system on a multi-step project to track progress

Community Tools: ClaudeDesk

• ClaudeDesk v4.4.0 — An open-source Electron desktop app wrapping the Claude Code CLI. Provides multi-session terminals, split views, and agent team visualization.
• Features: full git workflow (status, staging, commits) without leaving the app, 233+ automated tests.
• Useful as a GUI alternative when you prefer a desktop interface over the raw terminal.
• Reference: https://github.com/anthropics/claudedesk

Token Usage Awareness

• Opus 4.6 uses more tokens than previous models due to deeper planning and longer autonomous runs. Monitor your usage with /cost during sessions.
• Community reports suggest token consumption can spike significantly when using Opus 4.6 for design-heavy or test-heavy workflows.
• Tip: Use Sonnet 4.5 or Haiku 4.5 for routine tasks, and reserve Opus 4.6 for complex architecture and multi-step reasoning where quality matters most.