Initial commit: todo app guide with 5 prompts and examples
Complete companion repo for "Your First Hour with Claude Code" article. Includes step-by-step prompts, example output, troubleshooting, and cost guide. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kjell Tore Guttormsen
commit
ec708ba943
10 changed files with 1089 additions and 0 deletions
150
README.md
Normal file
150
README.md
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
# 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.
|
||||
|
||||
## 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 alternative** (if curl does not work):
|
||||
```powershell
|
||||
winget install Anthropic.ClaudeCode
|
||||
```
|
||||
|
||||
**Do not want to use a terminal?** Download the [Claude Code desktop app](https://claude.ai/download) or use [claude.ai/code](https://claude.ai/code) in your browser. Both work the same way.
|
||||
|
||||
A browser window opens to sign in. Complete the sign-in process and return to your terminal.
|
||||
|
||||
### Troubleshooting
|
||||
|
||||
If you see a "command not found" error after installing:
|
||||
1. Close your terminal completely (not just the tab)
|
||||
2. Open a new terminal window
|
||||
3. Type `claude` and press Enter
|
||||
|
||||
This fixes it almost every time. The installer adds Claude Code to your PATH, but the current terminal session does not pick it up until restarted.
|
||||
|
||||
## 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 (one prompt)
|
||||
|
||||
Copy and paste this prompt:
|
||||
|
||||
> Create a todo app as a single index.html file. Requirements: dark mode with a charcoal background, modern clean design, add/complete/delete tasks, tasks saved to localStorage so they survive page refresh. No external dependencies.
|
||||
|
||||
Claude Code will:
|
||||
1. Read your (empty) folder
|
||||
2. Plan the app structure
|
||||
3. Write the HTML, CSS, and JavaScript
|
||||
4. Create the file
|
||||
|
||||
It asks permission before creating the file. Type `y` to approve.
|
||||
|
||||
**Open the result:** Find `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 (iteration)
|
||||
|
||||
This is where it gets interesting. Copy the prompt from [prompts/02-add-categories.md](prompts/02-add-categories.md), or simply type:
|
||||
|
||||
> Add color-coded categories to the todo app: Work (blue), Personal (green), Health (orange), Learning (purple). Each task gets a category dropdown. Filter buttons at the top to show only one category.
|
||||
|
||||
Claude Code reads the existing file, understands the current design, and adds categories while keeping everything else working. One prompt, one iteration.
|
||||
|
||||
## Step 5: Add Search
|
||||
|
||||
Copy the prompt from [prompts/03-add-search.md](prompts/03-add-search.md), or type:
|
||||
|
||||
> Add a search bar at the top that filters tasks in real time as you type. It should search both task text and category names.
|
||||
|
||||
Watch how Claude reads the now-larger file, finds the right place to add the search input, writes the filtering logic, and tests that it does not break anything.
|
||||
|
||||
## Keep Going
|
||||
|
||||
Each file in `prompts/` is another iteration:
|
||||
|
||||
| Prompt | What It Adds |
|
||||
|--------|-------------|
|
||||
| [01-create-todo.md](prompts/01-create-todo.md) | Base todo app (dark mode, localStorage) |
|
||||
| [02-add-categories.md](prompts/02-add-categories.md) | Color-coded categories with filters |
|
||||
| [03-add-search.md](prompts/03-add-search.md) | Real-time search bar |
|
||||
| [04-add-due-dates.md](prompts/04-add-due-dates.md) | Due dates with overdue highlighting |
|
||||
| [05-make-responsive.md](prompts/05-make-responsive.md) | Mobile-friendly layout |
|
||||
|
||||
After these five, try your own ideas:
|
||||
- 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.
|
||||
|
||||
Read more: [Your First Hour with Claude Code](https://thedharmalab.com) (article on The Dharma Lab)
|
||||
|
||||
## Example Output
|
||||
|
||||
The `examples/` folder contains what Claude Code typically produces:
|
||||
|
||||
- [index.html](examples/index.html) - After prompt 01 (base todo app)
|
||||
- [index-v2.html](examples/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
|
||||
|
||||
See [costs.md](costs.md) for a full breakdown. Short version: Pro at $20/month is the lowest-risk way to start.
|
||||
|
||||
## Common Problems
|
||||
|
||||
See [troubleshooting.md](troubleshooting.md) for solutions to the most common issues people run into during their first session.
|
||||
|
||||
---
|
||||
|
||||
Part of [The Dharma Lab](https://thedharmalab.com) Claude Code article series.
|
||||
Loading…
Add table
Add a link
Reference in a new issue