START SMALL · BUILD SOMETHING USEFUL
Your First Vibe Coding Project: A Reading List
Your first AI coding project should be small enough that you can tell when it is finished. In this walkthrough, the result is a local reading-list page: type a book, add it to the list and remove it. This original worked example is designed for practice, not for collecting customer data.
1. Decide what “done” means
Write down three requirements before asking for code: adding a non-empty title creates one row; an empty title creates no row; Remove deletes only its own row. Keep the first version to one HTML file. You can use an AI coding tool or a chat assistant that can generate code. Tool subscriptions and capabilities vary; use an account you already have where possible.
2. Ask for the smallest working version
Copy this request. If your tool edits files directly, tell it the folder you want to use. If it gives you a code block, save the complete HTML in a plain-text editor as index.html, not index.html.txt.
3. Open the file and check the result
Open index.html in a browser. You should see a title, input and button. Type “Dune” and click Add: one Dune row should appear. Add “Sapiens”: two rows should appear. Remove Dune: Sapiens should remain. Try a blank input and spaces only: neither should create a row. These are expected results for this exercise; your AI output must be checked against them.
4. Fix one problem at a time
If Remove deletes both books, report exactly that. Do not ask the AI to redesign the whole page while fixing the bug. Save the broken file separately if you want to compare. After any fix, repeat all the checks, because a fix can change behavior that was already working.
5. Add saving as a separate improvement
Once the basic version passes, ask to save the list in this browser with localStorage. Add a book, reload, and check that it remains. Browser storage stays on that device and browser profile; it is not an account, backup or synchronization service. Clearing browser data can remove it. Do not store secrets or sensitive customer records there.
6. Keep a useful record of what you built
Save a working copy and a short note containing your original request, the checks that passed and one limitation. For example: “Adds and removes titles; survives reload in this browser; does not sync between computers.” You now have a clear result and an honest explanation. The next project can add one new idea instead of starting with ten unfamiliar features.