Build the first version.

Before you begin

Finish Day 1: know where your work lives (Notion). Open the same challenge folder in VS Code and check that AGENTS.md is visible in the Explorer.

Select Terminal → New Terminal. Confirm that the terminal’s path ends with your challenge folder. If the wrong folder is open, return to Day 1 before continuing.

What you’re practising

An AI chat gives you an answer. A coding agent can work directly with the files in your project folder. Your job is to give it clear boundaries, review its plan and test the result yourself.

You do not need to understand every line of code yet. In the next lesson, you’ll inspect how the three files fit together.

1. Start your coding agent

In the VS Code terminal, type codex and press Enter. If Codex is already running in that terminal, continue in the existing session.

2. Give it a bounded instruction

Copy the whole prompt below, paste it into Codex and press Enter. It asks the agent to explain its plan before creating anything.

We are building the first working version of a beginner-friendly Task Prioritizer in this folder.

Before making any changes:
1. Read AGENTS.md.
2. Confirm that you will work only inside this project folder.
3. Tell me which files you plan to create and what each file will do.
4. Wait for my approval before creating the files.

After I approve, create index.html, styles.css and script.js.

The app must let someone:
- type a task;
- assign it to Now, Next or Later;
- add the task;
- see tasks grouped under those three headings;
- mark a task complete;
- delete a task; and
- see the number of tasks in each group.

Use only plain HTML, CSS and JavaScript. Do not use frameworks, libraries, package managers, databases, APIs, sign-in or saved data.

Keep the design clean and the code simple enough for a beginner to inspect. Do not add features that I did not request.

When the app is complete, tell me which files you created and how I can test it.

3. Review the plan, then approve

The plan should name these three files and stay inside your challenge folder:

index.html

The page’s structure and content.

styles.css

The visual design.

script.js

The interactions.

It should not propose extra tools, installations or features. If it matches the request, reply:

Yes. Create the three files now. Stay inside this project folder and do not install anything.

Read any permission request before approving it. This lesson only needs changes inside the challenge folder. When the agent finishes, check that all three files appear beside AGENTS.md.

Your app’s colours and layout may differ from the example. What matters is whether the requested actions work.

4. Open the app

The app should open in your default browser. It is running locally on your computer; you have not published it online.

If your computer opens the file in an editor, use Finder or File Explorer’s Open with menu and choose your browser.

5. Test the first version

Use the app as a user would. Start with three ordinary example tasks:

1. Add Send invoice to Now.
2. Add Plan meeting to Next.
3. Add Read article to Later.
4. Check that each task appears in its chosen group and each count is one.
5. Mark Send invoice complete. It should visibly look complete.
6. Delete Read article. It should disappear, and the Later count should return to zero.
7. Add another task and check that its group count increases.

You’re checking the actions you requested. If one fails, describe the action, what you expected and what happened, then use the troubleshooting below.

Check your result

Day 2 is complete when all six statements are true:

• index.html, styles.css and script.js exist in your project folder.
• The Task Prioritizer opens in a browser.
• You can add a task to Now, Next or Later.
• You can mark a task complete.
• You can delete a task.
• Each group displays a task count that updates when you add or delete tasks.

If the agent takes longer than expected, continue when it finishes. You are working at your own pace.

Keep a little evidence

Save a screenshot of the working app and a sentence about what you tested. Keep it in a private note, or share it with your learning group if you want to. Remove any private information before sharing. Sharing is optional.

Understand the prompt you used

The build prompt comes from five decisions you can reuse:

1. Goal. Name the small tool and who it is for.
2. Actions. Describe visible behaviour: add, group, complete and delete.
3. Constraints. State the boundaries and agreed technology. The Builder Course chose plain HTML, CSS and JavaScript so this app needs no framework, database or deployment.
4. Control points. Ask the agent to read the instructions, explain the plan and wait.
5. Finish line. Define something you can see and test: three files and working actions.

For a future project, describe the outcome and practical limits you understand. If you do not know which technology to use, ask the agent to recommend one simple approach before it creates or installs anything.

I want to build [small tool] for [person or purpose].

It must let someone:
- [action];
- [action]; and
- [action].

Use [the technology we have already agreed].

My practical constraints are:
- [for example: it must run locally];
- [for example: it must not require a paid service]; and
- [another important limit].

Before changing anything:
1. Read the project instructions.
2. Explain your plan.
3. Wait for my approval.

Do not add features I did not request.

When finished, tell me what you changed and how I can test it.

If something gets stuck

Stop. Do not install anything. Follow AGENTS.md and use only index.html, styles.css and script.js with plain HTML, CSS and JavaScript.

The browser version is not working as expected. Inspect index.html, styles.css and script.js. Fix only the connection or functional problem. Do not add features. Tell me what you changed.