My partner and I set up a 29-gallon planted aquarium this fall, and that means testing the water constantly: ammonia, nitrite, nitrate, pH. Numbers scribbled on a notepad are useless for spotting trends, so I built a small web page for the tank instead.

It shows who lives in the tank, graphs our water tests over time, and has a QR code so anyone standing in front of the tank can pull it up on their phone. It’s one HTML file, it’s hosted for free, and it’s one of the best first projects I can recommend to anyone curious about vibecoding.

Why this is a great first project

It’s one file. No build tools, no frameworks, no installing anything. The AI writes an index.html, you open it in a browser, and you see the result immediately.

There’s no database to set up. The data lives in a Google Sheet, which you already know how to use. Logging a water test is just typing a row into a spreadsheet, even from your phone.

It’s free to host. GitHub Pages will host a static page like this at no cost, with its own web address.

It’s genuinely useful. You’ll actually open it, which means you’ll actually notice when something breaks, and fixing it teaches you more than any tutorial.

How it fits together

The page has three parts. A roster lists every fish and snail in the tank (ours have names, naturally). A water-test graph pulls rows from a public Google Sheet and charts each parameter over time, so you can see a spike coming instead of discovering it. A QR code is generated by the page itself, pointing at its own address, so there’s nothing to regenerate when things change.

The Google Sheet trick is the heart of it. Google Sheets lets you publish a sheet to the web, which gives you a link the page can read. Your spreadsheet becomes a tiny free database, and the page always shows the latest data without you touching the code.

A prompt to get you started

You don’t need to know any of the technical terms. Something like this is enough to get a working first version from Claude, ChatGPT, or any AI coding tool:

“Build me a single index.html page for my aquarium. It should show a list of the fish in the tank, and a line graph of my water test results (ammonia, nitrite, nitrate, pH) read from a public Google Sheet that I’ll give you the link to. Also generate a QR code that links to the page itself. Keep everything in one file so I can host it on GitHub Pages. Explain how to set up the Google Sheet.”

Then iterate: “make the graph show safe ranges shaded green,” “add a photo for each fish,” “show the date of the last test at the top.” Each request is small, and you can see the result in seconds.

It’s not really about fish

Swap the aquarium for anything you log in a spreadsheet: a garden, a sourdough starter, your car’s fuel mileage, a kid’s reading minutes, blood-pressure readings to show a doctor. The pattern is the same. A spreadsheet you already fill in, plus a one-file page that makes it visible and shareable.