A tool is not an app. It's not a website. It's smaller.
This is Code Club's graduation module. You're going to build a real thing — but not an app, not a website, not a startup. Something quieter: a tool. A tiny, specific helper that solves one real problem for one real person.
The difference matters because most beginners reach for "app" when they should be reaching for "tool." Apps are enormous. Tools fit on one screen. Apps try to serve everyone. Tools serve one person. And that's exactly why tools are the right thing to build first.
An app
Many features. Many screens. Anyone can download it. Tries to be general-purpose.
↳ months of workA tool
One screen. One job. Built for one person. Does one thing, does it well, and gets out of the way.
↳ an afternoonA website
Shows information. The reader reads. They don't do anything — they just look.
↳ an hour or two"Making a tool" means the person using it is doing something — and your code is helping them do it faster, more carefully, or at all. That's a completely different kind of thing from "making a site." Tools solve problems. Sites show things. Apps try to be businesses. Start with tools.
Answer these four questions before you write a line of code.
Every good tool is the answer to these four questions in order. Skip any of them and you'll end up building something clever that nobody needs — the classic beginner mistake.
Who is this for?
A specific person. Not "kids." Not "old people." A real human you can name. If you can't name them, stop and pick someone real first.
What is the problem?
Stated in their words, not yours. What do they actually struggle with? Describe the moment, not the abstraction.
What's the input?
What will the person put into the tool? Text? A number? A date? A file? Just one thing is fine — often better.
What's the output?
What comes back that actually helps them? Not "a result" — describe what it looks like, feels like, does for them.
Answer all four out loud before you touch your keyboard. If any of them feels vague or abstract, keep asking until it's concrete. The clearer your four answers, the easier the code will be. Most beginner tools fail at question 1, not at the code.
Here's grandma's big-text magnifier. Try it.
This is a real tool — the answer to all four questions from the last step. Type text in the top box. Watch it appear HUGE and high-contrast in the bottom box. That's the whole thing.
Grandma's Big-Text Reader
Paste or type any text. It'll show up big and readable.
↑ a real, working tool — type anything ↑
Notice how small this is. One input. One output. Two buttons. No menus, no settings, no login, no account. The entire tool fits on one screen. That's not a limitation — that's the whole design. Grandma doesn't need options. She needs to read the message.
Everything grandma would struggle with — small buttons, confusing menus, too many choices — is missing on purpose. Restraint is the most important feature of a good tool. The stuff you chose not to build is often the most important decision in the whole project.
A real tool is three files, not one.
If you did Skills Workshop Builders 04 (the Skills publishing finale), this shape will look familiar. A real tool you ship isn't just the code — it's a small package of three files working together.
The tool itself
The HTML structure — the input box, the output box, the buttons. What the person sees when they open it.
The logic
The JavaScript that takes input and makes output. The part that actually does the work. Usually tiny.
The explanation
A one-page human document: who it's for, what it does, how to use it. The thing grandma (or her helper) reads first.
Here's the complete README for grandma's tool. Notice how it answers all four questions from Step 02 — explicitly.
# Grandma's Big-Text Reader A tiny tool to make text easier to read. ## Who this is for My grandma. She has trouble reading small text on her phone, and usually asks someone to read it out loud. ## What it does You paste in any text — a message, an article, a note — and it shows it back to you HUGE and high-contrast, so you can read it without glasses. ## How to use it 1. Open the page. 2. Paste or type text into the top box. 3. Read it in the big box below. 4. Click "Clear" when you're done. That's it. No login. No settings. ## Who made it Made by Maya, age 12, for her grandma. License: CC0 (use it any way you want).
The README is not an afterthought. For a real user, the README is what they read first — before touching the tool. If the README makes sense to your target person (or to the person helping them), the tool is going to work for them. If the README is confusing, the tool will be too.
Scaffold your tool for your person.
Answer the four questions by filling in the form below. As you type, a real HTML file builds itself at the bottom — a working starter tool you can copy, save, and customize.
<!-- Fill in the form above. Your tool builds itself. --> <!DOCTYPE html> <html> ... </html>
The scaffold gives you a working tool with a text input, a transform function, and an output display. Save it as tool.html on your computer, open it in a browser, and customize the transform function for your specific problem.
Is it a tool — or just a toy in disguise?
The hardest taste judgment in Code Club. A tool solves a real problem for a real person. A toy is something you built because the building was fun. Both are okay — but if you say you built a tool, it better actually be one.
Round 1. Which of these is a real tool?
Round 2. You're building a tool to help your friend study vocabulary for a Spanish test. Which version is the better tool?
The best tools are the ones that get used once and then get closed. They solve a problem, they get out of the way, and the person goes back to their life. If you built something people are always opening, you built an app — a different thing. Neither is wrong, but knowing which one you're building is everything.
You just finished Code Club.
All eight modules. Makers and Builders. From your first HTML tag to a real tool somebody you love can use. Every piece of a real web developer's job, minus the parts that don't matter yet.
Every module you completed
🔨 Makers · 11–12
⚙️ Builders · 13–14
Code Club had one secret all the way through: the computer was never the point. The point was always the person you were building for. Module 01 asked you to write about something you loved. Module 04 of Makers asked you to ship it to the internet so others could see. Module 04 of Builders — this module — asked you to build something a specific person can actually use. Every step was about making things for humans, not for the computer.
You now know enough code to build almost any small tool you can imagine. There's nothing magic about the bigger ones — they're just smaller tools stacked on top of each other. Anyone who tells you it takes a genius is selling something.
From here, you have two places to go. Agent Lab (academy 03) teaches how to build AI helpers that can take actions on behalf of real people — deep empathy work. Harness Studio (academy 04, Builders only) teaches how to build systems that help other AI keep its taste and its honesty. Both are more advanced than Code Club. You're ready.
★ Before you call it done
Three questions. Same three. Every time.
These are the same three questions for every module in Kindling. They are how you check whether AI did the part it should and you did the part only you could. Tap each one to mark it true.
★ ★ ★