You want to create your first app with AI but don't know where to start? A todo app is the perfect project to begin vibe coding. In one hour flat, you'll build a working application that lets you add, check off, and delete tasks. No programming knowledge required: you'll simply describe what you want to Claude Code, and the AI will generate the code for you. This guide shows you exactly what to write, in what order, and how to solve common problems. By the end, you'll have a real app you can show off, improve, and use every day.
Why Start with a Todo App in Vibe Coding?
A todo app brings together all the fundamentals of development without the technical complexity. When you create a task list, you learn how to display information, add new data, modify it, and delete it. These four operations (called CRUD in tech speak: Create, Read, Update, Delete) make up 80% of what modern apps do.
Vibe coding makes this project doable in one hour—something that would take a beginner several weeks with traditional methods. You don't need to understand JavaScript syntax, DOM events, or state management. You simply describe what you want, and Claude Code translates your intentions into working code.
According to a GitHub study published in 2025, developers using AI assistants finish their projects 55% faster than those coding manually. For a complete beginner, the time savings is even more dramatic: you go from months of learning to just a few hours of practice.
This first project also gives you a concrete foundation for understanding how vibe coding works. You'll see in real time how your descriptions transform into an interface, how to fix errors, and how to gradually improve your app.
The Tools You Need for Your First Project
You need three things: a Claude Code account, a modern web browser, and a basic text editor. Nothing to install, nothing to configure. Claude Code runs entirely online and generates code you can test directly in your browser.
To create your Claude Code account, go to claude.ai and sign up with your email. The free version is more than enough for this project: you get 50 messages per day, plenty to build your todo app and polish it. For more details on initial setup, check out our Claude Code tutorial for beginners.
For your browser, Chrome, Firefox, Safari, or Edge all work perfectly. You'll simply open a local HTML file to test your app. No web server needed for this first project.
For the text editor, Windows Notepad or Mac TextEdit work fine, but I recommend Visual Studio Code (free at code.visualstudio.com). It color-codes automatically, making it easier to read, even if you don't understand everything yet.
Optionally, create a folder on your computer where you'll save your project. Call it "my-todo-app" for example. That's where you'll put the files Claude generates.
The Starter Prompt to Launch Your Todo App
Start with this exact prompt: "Create a simple todo app in HTML, CSS, and JavaScript in a single file. I want to be able to add tasks, check them off as done, and delete them. Minimalist and modern design." This prompt contains all the essential elements without getting into technical details you don't know yet.
The phrase "single file" is crucial for beginners. Claude will generate one HTML file that contains everything: the page structure, visual styling, and functional logic. You only have one file to manage, which simplifies things enormously.
Mentioning "minimalist and modern design" guides Claude toward a clean, pleasant interface without frills that would complicate the code. You'll have time to add advanced features later.
When you send this prompt, Claude usually responds in 10 to 20 seconds with a complete block of code. You'll see a chunk that starts with <!DOCTYPE html> and ends with </html>. That's normal—it's your app's code.
Copy all of this code, paste it into your text editor, and save the file as todo.html in your project folder. Then double-click the file: it opens in your browser and you already see your first working app.
If Claude gives you multiple separate files (HTML, CSS, JS), ask again: "Can you put everything in a single HTML file?" It will merge it all for you.
Test and Improve Your App Step by Step
Open your todo.html file in the browser and test each feature: add a task, check it off, delete it. If everything works right away, great! If not, note exactly what doesn't work. For example: "When I click Add, nothing happens" or "Tasks show up but I can't delete them".
Go back to Claude and describe the problem in your own words. You don't need to understand why it's broken—just explain what you observe. Claude will analyze the code it generated and suggest a fix. Copy the new code, replace the old one in your file, save, and refresh your browser (F5).
This test-fix-test loop is the heart of vibe coding. You don't debug the code yourself: you simply describe what's wrong, and the AI fixes it. According to Anthropic data, Claude Code solves 73% of bugs on the first try when the problem description is clear.
Once the basic features work, improve your app gradually. Here are simple requests that transform your todo app:
- "Add a counter that shows how many tasks are left"
- "Change the background color to light blue and the buttons to green"
- "Make completed tasks appear crossed out and grayed out"
- "Add an animation when I delete a task"
- "Save the tasks so they stay even if I close the browser"
Each request takes 30 seconds to write and 20 seconds for Claude to generate the change. You copy, test, and validate. In 10 minutes, you can transform your basic app into something truly personal.
Common Mistakes and How to Fix Them
Mistake number one: forgetting to save the file after pasting Claude's new code. You copy the code from Claude, you close the browser, and you see no changes. Solution: always save (Ctrl+S or Cmd+S) before refreshing the browser.
Second common mistake: copying only part of the code. Claude sometimes gives long responses, and you might miss the end if you don't scroll all the way down. Always verify you're copying from <!DOCTYPE html> all the way to </html> inclusive.
Third trap: giving contradictory instructions. If you ask "make the buttons red" then two messages later "I want a blue theme everywhere," Claude will try to reconcile both and the result might be weird. Solution: if you change your mind, say it clearly: "Actually, forget the red, I want everything blue".
Fourth problem: the file won't open in the browser but in the text editor instead. This happens if the file extension is .txt instead of .html. When you save, make sure you type todo.html with the .html at the end. On Windows, you might need to enable file extension display in your file explorer options.
Fifth mistake: asking for too much at once. "Add categories, due dates, a priority system, and dark mode" will probably generate buggy code. Go step by step: one feature at a time, test, validate, then move to the next.
If nothing works after several tries, ask Claude again: "Generate me a complete todo app in a single HTML file, the simplest version possible, just add and delete tasks". Start from this minimal base and build gradually.
Going Further After Your First Todo App
Once your todo app works, you've learned the basics of vibe coding and can tackle more ambitious projects. The logic stays the same: you describe what you want, test, fix, improve. But now you can aim for more complex apps.
Natural next step: add data persistence. Ask Claude: "Save the tasks in the browser's localStorage so they stay even after closing". This feature transforms your todo app into a tool you can actually use every day.
Next, explore categories: "Add the ability to create different lists (Work, Personal, Shopping) with tabs to switch between them". You're starting to structure more complex data without writing a single line of code.
To go even further, learn how to create a complete app with AI. This guide shows you how to move from a simple project to a real web app with a database and authentication.
You can also improve your prompts by applying prompt engineering techniques. The better you communicate with Claude, the more the generated code matches exactly what you want.
Finally, diversify your projects: create a tip calculator, a random quote generator, a Pomodoro timer. Each project teaches you new possibilities. On Skilzy, we guide you through 12 progressive projects that take you from complete beginner to functional app creator.
Vibe coding opens a world where you can build what you imagine without spending months learning syntax. Your todo app is the first stone. Keep experimenting, testing, asking. That's how you learn.
Conclusion
You just created your first app with vibe coding. In one hour, you went from zero to a working todo app you can use and improve. This method lets you build real projects from day one, without drowning in theory. Keep experimenting with other ideas, and join Skilzy to structure your learning with progressive projects and personalized support.
