Your First Vibe Coding Project: Build a Todo App in 1 Hour
Want to create your first app with AI but don't know where to start? A todo app is the perfect vibe coding project to get going. 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 generates the code for you. This guide shows you exactly what to write, in what order, and how to fix common issues. 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 build 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 weeks with traditional methods. You don't need to understand JavaScript syntax, DOM events, or state management. You just describe what you want, and Claude Code turns 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 hands-on practice.
This first project also gives you a solid 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.
What 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 right in your browser.
To set up your Claude Code account, head 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 beginner tutorial.
For your browser, Chrome, Firefox, Safari, or Edge all work great. You'll just 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'd recommend Visual Studio Code (free at code.visualstudio.com). It color-codes your text 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 something like "my-todo-app". You'll put the files Claude generates there.
Your Starting 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 has all the essential elements without getting into technical details you don't know yet.
The phrase "single file" is crucial for getting started. Claude will generate one HTML file that contains everything: the page structure, visual styling, and working logic. You only manage one file, which keeps things super simple.
Mentioning "minimalist and modern design" guides Claude toward a clean, nice-looking interface without extra bells and whistles that would complicate the code. You can add fancy 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'll 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, awesome! If not, write down 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 see. Claude will look at 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 just describe what's wrong, and the AI fixes it. According to Anthropic's data, Claude Code solves 73% of bugs on the first try when you describe the problem clearly.
Once the basic features work, improve your app gradually. Here are some simple requests that transform your todo app:
- "Add a counter that shows how many tasks are left"
- "Change the background 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 turn 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 your 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 check that you copy from <!DOCTYPE html> all the way to </html> included.
Third trap: giving contradictory instructions. If you ask "make the buttons red" and then two messages later "I want a blue theme everywhere," Claude will try to combine both and the result might look weird. Solution: if you change your mind, say it clearly: "Actually, forget the red, I want everything blue".
Fourth problem: the file opens in your text editor instead of the browser. 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 turn on 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 fresh from this minimal base and build up gradually.
Going Further After Your First Todo App
Once your todo app works, you've learned the basics of vibe coding and you're ready for 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 turns your todo app into something 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 now handling more complex data structures without writing a single line of code.
To go even further, learn how to build 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 user login.
You can also improve your prompts by using prompt engineering techniques. The better you communicate with Claude, the more the generated code matches exactly what you want.
Finally, try different projects: build 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 someone who can build working apps.
Vibe coding opens a world where you can build what you imagine without spending months learning syntax. Your todo app is the first step. Keep experimenting, testing, and asking. That's how you learn.
Conclusion
You just built your first vibe coding app. In one hour, you went from zero to a working todo app you can use and improve. This method lets you build real projects on day one, without drowning in theory. Keep experimenting with new ideas, and join Skilzy to structure your learning with progressive projects and personalized support.
