Your first project, from A to Z

Let's put it all together with a real project: the little tool for splitting costs between flatmates (or friends, for a weekend away). It fits in a single file, needs nothing installed, and can go online for free.

1. The description

"I want a web page, in a single HTML file, that opens in the browser with nothing to install. You enter first names, then expenses (who paid, how much). The tool shows who owes how much to whom, split equally. No account, nothing is sent to a server. Readable on a phone. Before writing the code, ask me your questions."

2. The minimal version

After answering the questions, ask only for the first step: two names, two amounts, a total. Copy the code into a text file, save it as "costs.html", then open it with a double click. It appears in your browser: that's your first program.

3. Feature by feature

• Add one thing at a time: more than two people, then the who-owes-what calculation, then the styling.
• After each step, test with a known case: Léa 30 euros, Tom 10 euros, so Tom owes Léa 10 euros.
• Keep a copy of each working version: costs-v1.html, costs-v2.html…

4. When it gets stuck

Press F12, Console tab, copy the full message and give it to the AI along with what you were doing and what you expected. If two fixes fail, go back to the last copy that worked.

5. The review before publishing

Ask the AI: "Review this file. Does it contain a secret? Does it send data anywhere? What happens if someone types letters instead of an amount, or a negative amount?" Fix what needs fixing, then test it on your phone.

6. Going live

Several services host a page like this one for free, for example Netlify, GitHub Pages or Cloudflare Pages: often you just drop the file in. Your tool contains no secrets and stores nothing on a server: that's exactly what makes it safe to publish. You get an address to share with your flatmates.

What next?

Keep a small notes file: your description, the requests that worked well, the errors you ran into. Then pick the next project, a notch more ambitious, with the same method.