Build your first thing

Learning objective

By the end of this lesson, you will have a checklist page of your own — your items, built by your agent, open in your browser — that remembers what you've ticked when you close it and open it again. You'll have asked for one change, steered one mismatch, saved a working version your agent confirmed, and reopened the page without your agent.

Why this matters

You have an installed app and an empty conversation, and this is the moment most people put the app down: nothing in it is yours yet. So this lesson makes something first — small, useful to you today, running in your browser inside the hour — and every lesson after it has something real to point back at.

Following along: This lesson shows no sample conversation, on purpose: your agent's words will be its own, and the page in your browser is what you check. Plan thirty to forty-five minutes once your app is open — a guess, not a measurement; this course hasn't yet timed real learners on it.

Core read

Do: pick your list

A checklist. One page, a title, and five to eight items you actually use — what to pack for a trip you take often, the weekly shop, the closing-up routine at work. You tick items off, and the page remembers which are ticked when you close it and open it again. That memory is the useful part.

Before you type anything, write down the title, the items, and one change you'd want once you've seen it (a missing item, a better title, a button that clears every tick). Keep private details — addresses, passwords, medical notes — out of it. If the three things take more than two minutes, pick a smaller list.

Do: point your agent at a folder

Make a new, empty folder on your Desktop called my-first-thing, then point your agent at it. In Claude Code desktop (the paid-track agent app, opening in its own window on your computer, → GLOSSARY): open the Code tab, choose Local, click Select folder, and pick it. In the ChatGPT desktop app, using Codex (the coding agent inside the free-track ChatGPT desktop app, → GLOSSARY): choose Codex instead of ordinary chat, then open a folder and pick it. If Claude Code desktop says it needs a program before it can open the folder, the note in Lesson 5 says what to do.

Lesson 5 showed you the setting that decides how often the app asks before it acts. In Claude Code desktop, set the selector next to the send button to Manual before your first ask. In the ChatGPT app with Codex, expect it to work inside your folder without asking. Two rules either way: when the app asks, approve what's about making or changing this page or opening it in your browser, and for anything else — an account, an install, the internet, deleting something — ask "What does this do, and why do you need it for the checklist?" first. When the app doesn't ask, the page is still your check, one step later.

Do: ask for it

Type this, with your list filled in:

Make me one self-contained web page called "[your title]" — a checklist I can tick items off. The items are: [your items]. When I tick an item, close the page, and open it again, the ticks should still be there. One file, in this folder, that opens in my browser when I double-click it. Don't install anything, don't connect to anything on the internet, and don't ask me for any account. When it's ready, open it in my browser.

Your agent says what it will do, maybe asks a question, does the work, and reports done. Its "done" is a claim. The page is the proof.

See: open the page

If it didn't open by itself, say: "Tell me where the page is and how to open it." Then open my-first-thing and double-click the file. In Claude Code desktop, clicking the page's name in the conversation also opens it inside the app.

Check: behavior, not looks

1. Your items? Read the list. Anything missing, reworded, or added is a mismatch.
2. Do ticks stick? Tick two items. Close the tab. Open the page again. Same two ticked?
3. Anything broken? Blank space, red text, half a page. Don't work out what it means — say it: "The page is blank below the title."

Check 2 is the one that matters: a page can fail it while looking perfect. If the ticks vanish, say exactly that: "I ticked two items, closed the tab, opened the page again, and the ticks were gone. They should still be there." What you saw, then what should be different — that's the whole skill of this course in miniature.

Stop when the behavior works. The page doesn't have to be pretty.

Do: ask for one change, and steer if it misses

Now the change you wrote down, in one sentence: "Add a button at the bottom that clears all the ticks." Look again the same way: is it there, does it work, do ticks still stick?

One possible example, with sample items; your page may differ.

When it isn't what you meant — the button is at the top, an item got reworded — say what you saw and what should be different, and nothing about how: "The button ended up at the top. Put it at the bottom, below the last item, and change nothing else." If your agent says done and the page looks the same, refresh the page first, then say so. If two tries miss, say: "Start over on this change: [your sentence]."

Do: save it

The page needed nothing installed. Saving is different: it's the first thing in this course that may need a helper program your computer doesn't have yet, and your agent is the one who checks and installs it. Say:

Before you save, check whether this computer has everything you need to save working versions. If something is missing, tell me in plain words what it is and why you need it, then help me install it. Tell me before anything needs my approval, and tell me when it's ready.

Approve what it explains is about saving in this folder. If it opens an installer window for you to click through, that's normal — it can't click for you. If that installer asks for your computer's administrator password, type it into the installer's own window — never into the chat, and your agent should never ask you to. It may ask for a name and an email to label your saves: give the same email you used for GitHub. If it says an install didn't work, don't repeat it blindly — say: "The install didn't work. Tell me in plain words what happened and what you'd try next." If two tries don't land, stop here: your page is still in its folder, and you can come back to this step in a fresh conversation later.

When it says it's ready, say — word for word, because you'll say it for the rest of the course:

Save this as a working version, with a one-line note about what changed.

Then ask: "Confirm the working version is saved, and tell me what the note says." A save is real when your agent confirms it.

What that save is: the page's file, kept, so that "take us back to the last saved working version" can bring the file back if a later change goes wrong. What it isn't: it doesn't keep your ticks. Those live in your browser's memory for this page, not in the file, and clearing your browser's stored data clears them. And it's on this computer only — if your agent offers to put a copy online or connect an account, say "Not yet." Module 2 adds that half.

See: reopen it without your agent

Close the tab and the agent app. Open my-first-thing and double-click the page. Ticks still there? That's the difference between having read about a tool and having one.

Where it lives

In that one folder, on this computer. It isn't on the internet, and nobody reaches it through a web address — putting a thing where other people can visit it is a separate step, and Module 4 starts there. (If your Desktop syncs to a cloud service, the folder may be copied to your other devices the way any folder there is.) Keep it: Module 2 saves it properly, and it's yours to change afterwards.

Exercise

The core read is the exercise; this is the list to tick.

1. Write the three things — title, five to eight items, one change — with nothing private in them.
2. Make the folder my-first-thing and point your agent at it. Claude Code desktop: set Manual first.
3. Ask with the sentence above, your items filled in.
4. Open the page in your browser; ask "Tell me where the page is and how to open it" if it didn't open.
5. Run the three checks, ticks-stick first. Steer if anything misses.
6. Ask for your one change, then check again.
7. Check first, then save. Say the check-first sentence; approve what's about saving in this folder; if an install fails twice, stop and come back later. Then say the save sentence, and ask your agent to confirm the save and read you the note.
8. Close everything and reopen the page from the folder.

Your deliverable: a checklist page with your items, ticks that survive closing and reopening, one change you asked for, and a saved working version your agent confirmed.

Checkpoint

You've got this if you can:

• Open your checklist from its folder, without your agent, and see your ticks where you left them.
• Say the two-sentence shape for when the page isn't what you meant: what you saw, then what should be different.
• Say what the saved version keeps (the page's file) and what it doesn't (your ticks).
• Say what you do when saving needs something installed: ask your agent to check, explain, install and confirm — you approve, you never type commands.

Where to go next

You've now done, once, what this course teaches: knew what you wanted, asked, checked, said what should be different, saved when it worked. The practical route from here:

1. Module 2, Lesson 3 — the save system. Go there next. It takes today's save and adds the half it's missing: a copy of your checklist somewhere safer than one computer, and the sentence that brings a version back. It's the safety net for everything after it. Module 2's first two lessons are short optional reads on how your agent goes wrong and what it runs for you — read them when you want them.
2. Module 3 — the loop. The four moves you made today, one lesson each, on a separate throwaway page, so the first time you steer on purpose there's nothing you care about underneath.
3. Module 4 — the next useful build, and the first other people can visit: a small social app, from an empty folder to a public address, one chunk at a time.

Module 1 is on demand. It explains what's underneath a page like yours — where the page comes from, where information is kept, who's allowed in, how a thing goes public. Each Module 4 build lesson names the Module 1 lesson whose picture it uses; read it the first time a build needs it. On the course site it never locks anything, and its drawing exercises are optional.

What you just did

You made a page that does something useful for you, in a folder on your own computer, by saying what you wanted rather than learning how it's built. You also met the two facts that shape every later lesson: your agent's "done" is a claim you check against the page, and the app's asking is a setting, not a guarantee. The practical next step is the save system in Module 2, Lesson 3 — the half of today's save that survives this computer.