Getting Started: From Zero to First Project

Prerequisites Checklist

Already have:

✅ MacOS computer
✅ Claude account (Claude Code access depends on your plan)
⚠️ CHECK THIS: Review claude.ai/settings/data-privacy-controls and choose your data privacy setting

Need to install:

1. **Claude Code** (the easiest way - no Node.js needed!)

# Open Terminal and paste this one line:
curl -fsSL https://claude.ai/install.sh | bash

That’s it! This downloads and installs everything automatically.

2. **Git** (probably already installed, check with `git --version`)
    - If not installed, macOS will prompt you to install it

Alternative installation (if you prefer npm):

First install Node.js from nodejs.org
Then: npm install -g @anthropic-ai/claude-code

Your First Session (Detailed Walkthrough)

Already did Quick Start? This section goes deeper into what’s happening at each step. If you just want to try it, jump to Quick Start instead.

Step 1: Open Terminal and create a project folder

mkdir ~/claude-projects/my-first-app
cd ~/claude-projects/my-first-app

What you’ll see: Nothing! The command completes silently.

What actually happened:

Your Mac's file system:
/Users/yourname/
  ├── Desktop/
  ├── Documents/
  ├── Downloads/
  └── claude-projects/          ← Just created this!
      └── my-first-app/         ← You're now "inside" this folder

Verify it worked: Type pwd and press Enter

pwd

Step 2: Start Claude Code

claude

What you’ll see: After 1-2 seconds, a welcome interface appears:

┌─────────────────────────────────────────────────┐
│ Welcome to Claude Code                          │
│                                                 │
│ I can help you build and modify code in:       │
│ /Users/yourname/claude-projects/my-first-app   │
│                                                 │
│ What would you like to build?                  │
│ >                                               │
└─────────────────────────────────────────────────┘

The blinking cursor after > means Claude is waiting for your instructions.

Step 3: Tell it what to make (in plain English)

Create a simple timer app with start, stop, and reset buttons

What you’ll see: Claude’s thought process displayed in real-time:

> Create a simple timer app with start, stop, and reset buttons

I'll create a timer app for you with those controls.

Creating files:
  - index.html (the main page)
  - styles.css (to make it look good)
  - script.js (the timer logic)

[Shows code being written...]

✓ Created index.html
✓ Created styles.css
✓ Created script.js

Your timer app is ready! Open index.html in your browser to try it.

Behind the scenes: Claude just created 3 files in your my-first-app folder. You can see them in Finder if you navigate to your home folder → claude-projects → my-first-app.

Step 4: Open your creation

open index.html

What you’ll see: Your default browser launches and displays:

┌─────────────────────────┐
│                         │
│         00:00          │
│                         │
│  [Start] [Stop] [Reset] │
│                         │
└─────────────────────────┘

Click “Start” → the timer counts up! This is a real, working application. You built this.

Step 5: Want changes? Just ask

Make the buttons bigger and add a dark mode toggle

What you’ll see: Claude modifies the existing files:

> Make the buttons bigger and add a dark mode toggle

I'll update the app with those changes.

Modifying files:
  - styles.css (bigger buttons, dark mode styles)
  - index.html (adding dark mode toggle)
  - script.js (dark mode toggle logic)

✓ Updated styles.css
✓ Updated index.html
✓ Updated script.js

Changes applied! Refresh your browser to see the updates.

In your browser: Press Cmd+R (Mac) to reload. Now you see:

Bigger buttons
A new ”🌙” toggle in the corner
Click it → dark mode!

Step 6: Understanding what just happened

The conversation pattern:

1. You describe what you want in plain English

2. Claude figures out what files/code are needed

3. Claude creates or modifies those files

4. You test the result

5. You iterate with more requests

The files are REAL:

They’re on your Mac (in ~/claude-projects/my-first-app)
You can edit them manually (try opening index.html in TextEdit)
You can copy the whole folder and it still works
No internet needed to use the app (after it’s built)

To exit Claude Code: Type exit or press Ctrl+D

Understanding the Interface

When you type claude, you get:

┌─ Welcome to Claude Code ─────────────────┐
│                                          │
│ Current directory: ~/claude-projects/... │
│                                          │
│ What would you like to build?           │
│ >                                        │
└──────────────────────────────────────────┘

Key differences from claude.ai:

Can read/write files in current folder
Can run terminal commands (like git, npm)
Can access up-to-date info from the web (when enabled)
Multi-turn conversations about your codebase