how to build

Start here

Build real things with an agent at your side.

This site teaches you to make games, apps and websites with Claude Code and Codex. These are agents: programs that read your files, write code and run commands while you tell them what you want. You start with nothing installed and end with things online that your friends can open on their phones.

Do the 10-minute first win Go to chapter 1

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.

Prices change. Check claude.com/pricing and chatgpt.com/pricing before you pay.

The 10-minute first win

Before you install anything, make a game. This one. Play it first.

About a hundred lines of code. The chat writes all of them. The game plays on a phone, but for the saving steps below you need a laptop or desktop. The free plan of Claude or ChatGPT is fine for this part.

  1. Open claude.ai or chatgpt.com and sign in.

  2. Paste this in.

    Make me a small game in a single HTML file. A circle appears somewhere on the page and shrinks. If I tap or click it before it disappears, I score a point and a new circle appears somewhere else. Each circle shrinks a little faster than the last. If three circles disappear without being tapped, the game ends and shows my score with a "Play again" button. 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. Reply with only the code, in one block.

    You should see: a block of code that starts with <!doctype html> or <html>. Copy all of it. There is usually a Copy button on the block.

  3. Save the code as a file called 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.

  4. Double-click index.html on your Desktop.

    You should see: a circle. Click it. Keep clicking. Lose. Play again.

  5. Change one thing. Go back to the chat and say, for example, "Make the circles different colours" or "Add a sound when I pop one". Save the new code over the old file and reload.

    You should see: your change, in your game. This step is the whole site in small: say what you want, the agent writes it, you check it.

The rest of the guide does the same thing with bigger projects, and the agent works on your files directly, so there is no copy and paste.

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).

See all nine projects →

The path

Eight chapters. Do them in order. Each one ends with something working.

  1. Set up your computer

    Open a terminal and install git and Node.

  2. Get Claude Code

    Install it, log in with your plan, and run your first session.

  3. Get Codex

    The same, for Codex, if you use ChatGPT.

  4. How to work with an agent

    Write a brief, ask for a plan, build, check, and undo when it goes wrong.

  5. Save it on GitHub

    Keep every version of your work, safe and off your laptop.

  6. Put it online with Cloudflare Pages

    Get a web address anyone can open.

  7. Keep data

    Save scores, posts and photos, from the browser up to a real database.

  8. 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.