Loading...
Loading your progress…
Level 4 — Your first project · Full walkthrough

Your first project

Here's the thing nobody says plainly: because these tools write code, and everything digital is made of code, you can build basically anything. The report, the tracker, the little tool your team has wanted for years — all within reach. But you need to walk before you can run. So this first project is deliberately small, deliberately fun, and done in about twenty minutes.

By the end you'll have built a real, working thing — and more importantly, you'll have felt the rhythm of working with an agent, which is the actual skill.

Step 1 — Make a folder

Remember the filing cabinet? Time to open your own drawer. Go to your Desktop, right-click on an empty spot, choose New Folder, and name it my-first-project. That's it — this folder is where your agent will work, and there's nothing in it to break.

Step 2 — Open it in VS Code

Open VS Code, then choose File → Open Folder and pick the folder you just made. The window will look mostly empty — an empty folder looks like an empty drawer. Normal.

Step 3 — Wake up your agent

Click your agent's icon in the sidebar — Claude Code or Codex, whichever you installed. A chat panel opens. That blinking cursor is the moment most beginners freeze, so let's skip the freeze: your first prompt is written for you.

Step 4 — Paste this prompt

Copy this into the chat, exactly as written:

Your first prompt Build me a fun webpage called "What's for Dinner?" with one big button. When I click the button, it picks a random dinner idea from a list of 20 and shows it with a playful animation. Make it colorful and friendly. When you're finished, tell me exactly how to open it.

Notice what that is: a clear description of what you want, in plain English, with the outcome stated. No code, no technical words. That's a prompt — you already knew how to write one.

Step 5 — Watch it build

Send it, and watch. The agent will usually lay out a quick plan first, and depending on the tool and its settings it may check with you before making changes — or it may just get to work. Both are normal. Files appear in the left sidebar as it builds; if it asks you anything along the way, read it and answer in plain English.

Step 6 — Open what you made

When it finishes, it will tell you how to open the page — usually just double-clicking the new file in your folder, which opens it in your browser. Click the button. Get a dinner. Click it again.

Pause on this moment. That page isn't a website you visited — it's a file in your folder, on your computer. You described it, and now it exists. You just made software.

Step 7 — Now change something

This step matters more than the build. Go back to the chat and ask for a change, in plain English:

Watch it update, refresh the page, see your change. This loop — describe, watch, check, refine — is the entire skill. "Not quite right, change this" isn't the tool failing; it's how the tool is used. Every project you ever do with an agent, from this toy to a real report, is this same loop with bigger requests.

What just happened

If you're curious, click the file the agent created in the left sidebar. That wall of text is the code it wrote — the part that used to be the barrier. You never had to read it, write it, or understand it. You described; it built; you checked.

Now build whatever you want

The dinner picker was training wheels. The steps you just did — describe, watch, check, refine — work for anything you can put into words: a countdown to your vacation, a spinning wheel for family debates, a tracker for whatever you're keeping tabs on. Make a new folder and try one. The prompt is yours now.

And since everything digital is made of exactly that stuff, the same loop applies to your spreadsheets, your folder of PDFs, your monthly report. For a taste of what that looks like, browse the real use cases.