Start here
Build real things with an agent at your side.
Make games, apps and websites by telling Claude Code or Codex what you want. No coding, nothing to install for the first one. Start with the game below.
The 10-minute first win
Play this. Then make your own.
-
Open claude.ai or chatgpt.com and sign in.
-
Paste this in.
Make me a small game as a single HTML file I can play right here. Bubbles float up from the bottom of the page, one every second or so. If I tap or click a bubble before it floats off the top, it pops and I score a point. The bubbles come faster as my score grows. If three bubbles get away, the game ends and shows my score with a "Play again" button; only that button restarts the game. It must work on a phone with a finger and on a laptop with a mouse, and it must not scroll or zoom the page while playing. Put the CSS and JavaScript inside the same file.
You should see: the game open in a panel beside the chat. Claude calls this panel an artifact. ChatGPT calls it canvas; if ChatGPT shows code instead, say "Open it in canvas and show the preview". Bubbles rise. Pop them. Miss three. Play again.
-
Change one thing. Say, for example, "Make the bubbles rainbow coloured" or "Add a sound when I pop one".
You should see: your change, in your game, in the same panel. This step is the whole site in small: say what you want, the agent writes it, you check it.
Want it as a file on your computer?
You do not need this for the guide. But a game in a file is yours to keep, and it is what chapter 5 puts online.
Say "Give me the whole file as one code block" and copy it with the Copy button. Then save it as index.html.
Mac
Open TextEdit. In the menu, pick Format, then Make Plain Text. Paste the code. Save it to your Desktop as index.html. If it asks, choose "Use .html".
Windows
Open Notepad. Paste the code. Choose File, then Save As. Set "Save as type" to "All files". Name it index.html and save it to your Desktop.
Linux
Open your text editor (gedit, Kate or Text Editor). Paste the code. Save it to your Desktop as index.html.
Double-click the file. It opens in your browser and you can play. If you see code instead of a page, the file was saved as index.html.txt or as rich text: on a Mac make sure you picked Make Plain Text, on Windows make sure "Save as type" was "All files".
The rest of the guide does the same thing with bigger projects, and the agent works on files on your computer, so what you make is yours to keep and put online.
Who this is for
You have never opened a terminal, or you opened one and closed it fast. You might be a teenager with a game idea. You might be someone who likes tech and wants to see what these agents can really do.
You don't need to know how to code. You need a computer (Mac, Windows or Linux), some patience, and a few evenings.
What it costs
Some of this costs money. Here is all of it, up front.
- About US$20 a monthA paid plan for one agent. Claude Pro gets you Claude Code. ChatGPT Plus gets you Codex. You only need one. The free Claude plan does not include Claude Code. If you are a teenager, this is the part to ask a parent about.
- US$0Everything else. The free plans of GitHub (where your code is saved) and Cloudflare (where your sites go online) are enough for every project here.
Prices change. Check claude.com/pricing and chatgpt.com/pricing before you pay.
What you'll be able to build
The projects go from one star (an evening) to three stars (a real project you work on for a while).
- ★Dodge, a game in one file. You can play it on this site.
- ★My Site, a personal page, online at your own address.
- ★★Five Letters, a daily word game with a result you can share.
- ★★Habits, a tracker that saves to a real database.
- ★★★Arena, a game your friends play with you live, each on their own phone.
The path
Eight chapters. Do them in order. Each one ends with something working.
- Set up your computer
Open a terminal and install git and Node.
- Get Claude Code
Install it, log in with your plan, and run your first session.
- Get Codex
The same, for Codex, if you use ChatGPT.
- How to work with an agent
Write a brief, ask for a plan, build, check, and undo when it goes wrong.
- Save it on GitHub
Keep every version of your work, safe and off your laptop.
- Put it online with Cloudflare Pages
Get a web address anyone can open.
- Keep data
Save scores, posts and photos, from the browser up to a real database.
- Going further
Subagents, skills, hooks, reviews, costs and staying safe.
What this is not
This is not a course that makes you a programmer in a weekend. The agent writes most of the code. You will read a lot of it, ask about the parts that look strange, and slowly start to understand it. That understanding is what lets you build bigger things.
It is also not magic. The agent gets things wrong. A big part of this guide is how to notice that and how to get back to a version that worked.