d21e91ace5
README now links to prompt files instead of duplicating prompt text inline. Eliminates three divergent versions of the same prompts. - Remove all inline prompt text from README steps 3-7 - Each step links directly to its prompt file - Fix prompt 02: "search bar" -> "filter buttons" (search doesn't exist yet) - Standardize Windows install to irm (official, auto-updates) - Honest note about browser version limitations - Inline troubleshooting replaced with link to troubleshooting.md Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
131 lines
4.8 KiB
Markdown
131 lines
4.8 KiB
Markdown
# Build Your First Project with Claude Code
|
|
|
|
A todo app in 15 minutes. No coding experience needed.
|
|
|
|
## What You Will Build
|
|
|
|
A fully working todo app that runs in your browser. Dark mode, saves your tasks between sessions, mark tasks as done, delete them. All from a single sentence typed into Claude Code.
|
|
|
|
Then you will iterate on it: add categories, search, due dates, and mobile layout. Each step is one prompt.
|
|
|
|
|
|
|
|
## What You Need
|
|
|
|
- A Claude subscription (Pro at $20/month is enough)
|
|
- A computer (Mac, Windows, or Linux)
|
|
- About 15-30 minutes
|
|
|
|
That is it. No programming language to install. No frameworks. No package managers. No git.
|
|
|
|
## Get Started
|
|
|
|
### Step 1: Install Claude Code
|
|
|
|
Open your terminal:
|
|
- **Mac:** Press `Cmd + Space`, type `Terminal`, press Enter
|
|
- **Windows:** Press the Windows key, type `Terminal`, press Enter
|
|
- **Linux:** Press `Ctrl + Alt + T`
|
|
|
|
Paste this and press Enter:
|
|
|
|
```bash
|
|
curl -fsSL https://claude.ai/install.sh | bash
|
|
```
|
|
|
|
**Windows (PowerShell):**
|
|
```powershell
|
|
irm https://claude.ai/install.ps1 | iex
|
|
```
|
|
|
|
**Do not want to use a terminal?** Download the [Claude Code desktop app](https://claude.ai/download) and open the Code tab. The desktop app and terminal are full-powered. The browser version at [claude.ai/code](https://claude.ai/code) works for simpler tasks but has limitations.
|
|
|
|
A browser window opens to sign in. Complete the sign-in process and return to your terminal.
|
|
|
|
If you see a "command not found" error after installing, close your terminal completely and open a new one. See [troubleshooting.md](troubleshooting.md) for more.
|
|
|
|
### Step 2: Create a Project Folder
|
|
|
|
```bash
|
|
mkdir my-todo-app
|
|
cd my-todo-app
|
|
claude
|
|
```
|
|
|
|
This starts Claude Code inside your new folder. You will see a prompt where you can type in plain English.
|
|
|
|
### Step 3: Build the Todo App
|
|
|
|
Open [prompts/01-create-todo.md](prompts/01-create-todo.md) and copy the prompt into Claude Code.
|
|
|
|
Claude Code will read your (empty) folder, plan the app structure, write the HTML, CSS, and JavaScript, and create the file. It asks permission before creating the file. Type `y` to approve.
|
|
|
|
Open `index.html` in your project folder and double-click it. It opens in your browser. You now have a working todo app built from one sentence.
|
|
|
|
### Step 4: Add Categories
|
|
|
|
Open [prompts/02-add-categories.md](prompts/02-add-categories.md) and copy the prompt.
|
|
|
|
Claude Code reads the existing file, understands the current design, and adds color-coded categories with filter buttons. Nothing that already works breaks.
|
|
|
|
### Step 5: Add Search
|
|
|
|
Open [prompts/03-add-search.md](prompts/03-add-search.md) and copy the prompt.
|
|
|
|
A search bar appears at the top. It filters tasks in real time as you type and works together with the category filters.
|
|
|
|
### Step 6: Add Due Dates
|
|
|
|
Open [prompts/04-add-due-dates.md](prompts/04-add-due-dates.md) and copy the prompt.
|
|
|
|
Tasks get optional due dates. Overdue tasks are highlighted in red, tasks due today in amber. You can sort by due date.
|
|
|
|
### Step 7: Make It Mobile-Friendly
|
|
|
|
Open [prompts/05-make-responsive.md](prompts/05-make-responsive.md) and copy the prompt.
|
|
|
|
The app now works on phone screens. Touch-friendly buttons, proper text wrapping, no horizontal scrolling.
|
|
|
|
## Try Your Own Ideas
|
|
|
|
After the five prompts, try:
|
|
- Drag-and-drop reordering
|
|
- Export tasks as a text file
|
|
- Dark/light mode toggle
|
|
- Task priority levels
|
|
- Daily task count chart
|
|
|
|
The point is not the todo app itself. The point is learning how Claude Code works: you describe what you want, it builds it, you iterate with another sentence.
|
|
|
|
## How Claude Code Works
|
|
|
|
When you give Claude Code a task, it does not just generate text. It runs a loop:
|
|
|
|
1. **Read** your files to understand the current state
|
|
2. **Think** about what needs to change
|
|
3. **Act** by editing files or running commands
|
|
4. **Check** the result
|
|
5. **Repeat** until the task is done
|
|
|
|
This is called the **agent loop**. It is what makes Claude Code fundamentally different from a chatbot. A chatbot gives advice. Claude Code takes action.
|
|
|
|
## Example Output
|
|
|
|
The `examples/` folder contains what Claude Code typically produces:
|
|
|
|
- [index.html](https://thedharmalab.com/examples/todo-app/index.html) - After prompt 01 (base todo app)
|
|
- [index-v2.html](https://thedharmalab.com/examples/todo-app/index-v2.html) - After prompts 02 + 03 (categories + search)
|
|
|
|
Your results will look different. Claude Code generates fresh code each time. The functionality will be the same, but the exact styling and structure will vary.
|
|
|
|
## What It Costs
|
|
|
|
Pro at $20/month is enough to complete this guide. See [costs.md](costs.md) for a full breakdown.
|
|
|
|
## Common Problems
|
|
|
|
See [troubleshooting.md](troubleshooting.md) for solutions to the most common issues during your first session.
|
|
|
|
---
|
|
|
|
Part of [The Dharma Lab](https://thedharmalab.com) Claude Code article series.
|