Your First App with Claude Code

You've never written a line of code. Or maybe you've tried and gave up halfway through. It doesn't matter. In the next 30 minutes, you're going to build a real app — functional, good-looking, running in your browser.

No copying and pasting code from a tutorial. No understanding every line. You'll describe what you want in plain English, and Claude Code will build it for you.

The result? A personal task manager with a modern interface. Add tasks, mark them as done, delete them, filter by status. Everything saved in your browser.

Let's go.

What we're building

Before we start, here's what you'll have at the end:

A task manager app with a clean dark theme
A field to add new tasks
A button to mark tasks as complete (with a strikethrough on the text)
A button to delete tasks
Filters: view all, pending only, completed only
Due dates on each task
A progress bar showing the percentage of completed tasks
Responsive layout that works on mobile
Data saved in localStorage — close the browser, open it again, your tasks are still there

Sounds like a lot? With Claude Code, we'll build all of this in simple iterations. Each iteration is a request in plain English. None of them require prior programming knowledge.

Why a task manager?

You could build anything. A calculator, a personal page, a quiz. But the task manager is special for three reasons.

First, it's actually useful. You can use the app you build. It's not a throwaway exercise.

Second, it has real complexity without being intimidating. It involves creating, reading, updating, and deleting data — the four fundamental operations of any software. Developers call this CRUD. Every app in the world — from Instagram to online banking — is basically CRUD with a nice interface.

Third, it's expandable. Once it's done, you can add endless features. Categories, priorities, notifications, cloud sync. Each addition is a chance to learn something new.

Prerequisites

You need Claude Code installed and working. If you haven't done that yet, follow our guide How to Install Claude Code Step by Step and come back here.

You'll also need a browser (Chrome, Firefox, Edge — any will do).

Step 1: Create the project folder

Open your terminal and create a folder for your app:

mkdir ~/my-task-manager
cd ~/my-task-manager

Now start Claude Code inside that folder:

claude

Your folder is empty. That's exactly what we want. Claude Code works best when it understands the context — and an empty folder says "we're starting from scratch."

Step 2: The first prompt

This is the most important part. You'll describe what you want in natural language. It doesn't have to be perfect — it has to be clear. Think of it this way: if you were asking a human developer, what would you say?

A good description includes what the app does, how it should behave, and what it should look like. The more context you provide, the better the result on the first try.

Type the following in Claude Code:

You: Create a task manager web app using HTML, CSS, and JavaScript in a single index.html file. It should have: add tasks with a text field, mark tasks as complete, delete tasks, and filter by status (all, pending, completed). Use a dark theme with a modern, clean design. Save tasks in localStorage so they persist when the browser is closed.

Claude Code will analyze your request and start working. You'll see it creating the file, writing HTML, CSS, and JavaScript. Something like this will appear in your terminal:

Claude: I'll create the task manager with all the requested features. Creating the index.html file...

[Claude creates index.html with ~200 lines of code]

Done! I've created a task manager with:

Text input field to add tasks

Buttons to mark as complete and delete

Status filters (All/Pending/Completed)

Dark theme with modern design

Persistence via localStorage

Open the index.html file in your browser to test it.

Your first app already exists. Seriously. One prompt, one app.

You might be thinking: "But I don't understand the code it generated." That's okay. You don't understand your car engine in detail either — but you know how to drive. Over time, as you watch Claude Code generate code repeatedly, patterns will start looking familiar. Don't force the learning. It happens naturally.

Step 3: Open and test

Open the file in your browser. You can do this two ways:

From the terminal (without leaving Claude Code):

Open another terminal tab and run:

# On Linux/WSL
xdg-open ~/my-task-manager/index.html

# On macOS
open ~/my-task-manager/index.html

From the file manager: Navigate to the my-task-manager folder and double-click index.html.

You'll see your app. Dark theme, text field for tasks, working buttons. Test everything:

Type a task and click add
Create a few more tasks
Mark one as complete
Delete one
Use the filters to switch between all, pending, and completed
Close the browser, open it again — your tasks are still there

Does it work? Congratulations. You just built a real app.

But we're not stopping here.

Step 4: First iteration — add due dates

Real apps evolve. And with Claude Code, evolving means making another request. Go back to the terminal where Claude Code is running:

You: Add a due date field to each task. The field should appear next to the text field when creating a task. In the list, show the formatted date (e.g., "Mar 15, 2026"). Overdue tasks should display the date in red.

Claude: I'll add the due date field. Updating index.html...

[Claude edits the existing file]

Added:

Date picker next to the text input

Formatted date display for each task

Red highlight for overdue tasks

Date is saved with the task in localStorage

Refresh your browser. The date field is there. Create a task with yesterday's date — the date shows up in red. Create one for next week — it displays normally.

See the pattern? You describe, Claude Code implements, you test. This cycle has a name in the programming world: iterative development. It's how professionals work. The difference is that before, you needed years of study to execute each cycle. Now you need a prompt.

Also notice that Claude Code didn't create a new file. It edited the existing index.html, adding the feature without breaking what was already there. It understands the project's context.

Step 5: Second iteration — responsive layout

Your app works on desktop. But what about mobile? Let's make sure:

You: Make the layout fully responsive for mobile. On small screens, the text field and date field should stack vertically. Action buttons on each task should have a minimum size of 44px for easy tapping. Test with a 375px width.

Claude: I'll add responsiveness to the app. Updating the styles...

[Claude modifies the CSS]

Changes made:

Media query for screens below 480px

Inputs stack vertically on mobile

Buttons with 44px minimum width and height

Adjusted spacing for touch targets

To test: open DevTools (F12) and toggle the responsive mode.

Test it: press F12 in your browser, enable responsive mode (the phone/tablet icon), and watch your app adapt. Switch between different screen sizes. iPhone, iPad, Android. Everything should work.

That 44px detail isn't random. It's a real accessibility guideline (WCAG 2.2). Claude Code knows these best practices and applies them when you ask. You don't need to know the number — you need to know to ask for "easy tapping on mobile."

Step 6: Third iteration — progress bar

Let's add a finishing touch. A progress bar showing how many tasks you've completed:

You: Add a progress bar at the top of the app, below the title. It should show the percentage of completed tasks (e.g., "3 of 5 completed - 60%"). The bar should be green and fill proportionally. If there are no tasks, show "No tasks yet". Update in real time when marking/unmarking/adding/deleting tasks.

Claude: Adding the progress bar...

[Claude updates the file]

Progress bar added with:

Text showing "X of Y completed - Z%"

Visual bar with proportional green fill

Automatic updates on every interaction

Empty state: "No tasks yet"

Refresh your browser. The bar is there. Add tasks, complete a few, watch the progress climb. Delete a completed one, see the percentage change.

Three iterations. Three plain-English prompts. Your app now has due dates, a responsive layout, and a progress bar. Look at what you've built and compare it to the first prompt. Each iteration added a layer. This is how professional software is made — layer by layer, never all at once.

When something doesn't work

It will happen. Maybe the progress bar doesn't update correctly. Maybe the layout breaks at some screen size. Don't panic.

Tell Claude Code exactly what's wrong:

You: The progress bar doesn't update when I delete a task. It keeps showing the old number.

Or:

You: On mobile, the delete button is cut off on the right side. The text shows "Del..." truncated.

The more specific the problem, the better the fix. "It's not working" is vague. "The date doesn't turn red when overdue" is precise.

Claude Code will read the current code, identify the bug, and fix it. Most of the time, one prompt is all it takes. If it doesn't solve it, describe what's still wrong. Iterating is the process.

A valuable tip: if Claude Code did something different from what you wanted, but it's not technically "wrong" — it's a matter of taste or design — be explicit about your preference. "I want the button rounded, not square." "I'd prefer the date below the task title, not beside it." You're the designer. Claude Code is the builder.

Taking it further

Your task manager is complete and functional. But you can keep evolving it. Here are some ideas to practice:

Add categories:

"Add a category field (Work, Personal, Study) with different colors for each one. Allow filtering by category."

Light/dark theme toggle:

"Add a toggle button to switch between dark theme and light theme. Save the preference in localStorage."

Convert to React:

"Convert this app to React with Vite. Keep all features. Separate into components: TaskForm, TaskList, TaskItem, ProgressBar, FilterBar."

Drag to reorder:

"Allow reordering tasks by dragging and dropping. The new order should be saved in localStorage."

Deploy it live: You can deploy this app so anyone can access it from their phone or computer, from anywhere. We'll cover that in a future article about deployment.

Each of these ideas is a prompt. One request, one evolution. That's how apps grow. There's no magic moment where you "finish" learning. Every new feature is learning. And Claude Code is there to build alongside you.

What you just learned

Take a moment to realize what happened in the last 30 minutes:

You described what you wanted in natural language. No learning syntax, no memorizing commands. You said what the app should do, and it was built.

You iterated and refined. The first prompt created the foundation. Each following prompt added a feature. This is how software is developed in the real world — in cycles, not all at once.

You tested and gave feedback. You opened the browser, clicked around, verified things worked. When something wasn't right, you described the problem and asked for a fix.

You built a real app. Not an academic exercise. A functional task manager with data persistence, responsive layout, and modern UI. It's a project you can show someone.

And most importantly: this process scales. The same flow — describe, iterate, test — works for much more complex apps. A landing page. An online store. A data dashboard. The difference is the number of iterations, not the process.

Your next step? Pick one of the ideas from the previous section and keep building. Or think of an app you actually need in your daily life. And ask Claude Code to create it.

You already know how.

References

Quickstart — Claude Code Docs — Official Claude Code quickstart guide
How Claude Code works — Claude Code Docs — How Claude Code works: tools, context, and flow
Claude Code overview — Claude Code Docs — Overview of Claude Code capabilities

SEO

Title tag (~60 chars): Your First App with Claude Code | Hands-On Tutorial

Meta description (~155 chars): Learn to build a complete task manager app using Claude Code in ~30 minutes. Step-by-step tutorial with real prompts, no coding experience required.

Your First App with Claude Code: From Zero to Working