ktg/claude-code-first-project
1
0
Fork 0
Code Projects Releases Packages Activity Actions
Build your first project with Claude Code: a todo app from one sentence. No coding experience required.
9 commits 1 branch 0 tags 417 KiB
Find a file
Exact
Kjell Tore Guttormsen d21e91ace5 refactor: single source of truth for prompts 
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>
2026-03-15 20:08:58 +01:00
examples redesign: warm stone aesthetic for todo app examples 2026-03-15 16:27:23 +01:00
prompts refactor: single source of truth for prompts 2026-03-15 20:08:58 +01:00
costs.md Initial commit: todo app guide with 5 prompts and examples 2026-03-15 16:04:07 +01:00
README.md refactor: single source of truth for prompts 2026-03-15 20:08:58 +01:00
troubleshooting.md Initial commit: todo app guide with 5 prompts and examples 2026-03-15 16:04:07 +01:00

README.md

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.

Todo app screenshot

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:

curl -fsSL https://claude.ai/install.sh | bash

Windows (PowerShell):

irm https://claude.ai/install.ps1 | iex

Do not want to use a terminal? Download the Claude Code desktop app and open the Code tab. The desktop app and terminal are full-powered. The browser version at 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 for more.

Step 2: Create a Project Folder

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 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 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 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 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 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:

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 for a full breakdown.

Common Problems

See troubleshooting.md for solutions to the most common issues during your first session.

Part of The Dharma Lab Claude Code article series.