how to build

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.

Already made one? Go to chapter 1

The 10-minute first win

Play this. Then make your own.

About a hundred lines of code, all written by the chat. A phone and a free plan are fine.

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

  2. Paste this in.

    Make me a small game I can play right here, in one HTML file. 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. When the game ends, show my score and a "Play again" button. Everything else, the kind of game, how it looks, what makes it fun, is up to you. Surprise me.

    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". Probably not the game above. Play it. Lose. Play again.

  3. Change one thing. Say, for example, "Make it harder as I go" 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.

How much to say

Look at the prompt you just pasted. It is three sentences of rules and one sentence of freedom. That split is the one habit worth forming now.

There is no one right prompt. Here are three shapes that work. Try each at least once, and notice which gives you more of what you wanted.

Make me [the thing], in one HTML file. It must [rule], [rule] and [rule]. Done means [what I can see or do]. Everything else is up to you. Surprise me.

Make me [the thing].
Must have: [two or three things].
Up to you: [look, sound, difficulty, name, anything you want to add].
Do not: [scroll the page, need an account, use anything but one file].

I want [the thing]. Before you build anything, ask me up to five questions about what you cannot guess from that sentence. Then build it, and add two things you think would make it better. Tell me what you added.

Shape 3 is the one to reach for when you do not know what you want yet. Its questions are often better than the ones you would have asked yourself.

Every brief in this guide follows the same split: a short list of must-haves, and room for the agent to surprise you. Chapter 4 has the rest of the habit: ask for a plan, build in small steps, look after each one.

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.

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.