Time: 20–30 minutes

Today’s outcome: Explain the role of index.html, styles.css and script.js, and trace how one action moves through the app.

Quick links: LinkedIn lessons · WhatsApp group · The Builder Course website . Setup . Day 1 . Day 2

💡 Using Claude Code?

This lesson uses Codex. If you already use Claude Code, run claude instead of codex, and replace AGENTS.md with CLAUDE.md everywhere it appears—including inside the prompts you copy. The remaining steps are the same. The supported setup and demonstrations use Codex.

<aside>

Yesterday, the agent created a working Task Prioritizer.

Today, you will look inside the project without changing it.

You are not expected to understand every line of code. Your goal is to know what each file is responsible for, how the files connect and where to look when you have a question.

Why this matters

Using a coding agent does not mean ignoring the work it produces.

As projects become more complex, you need to know:

• what the agent created or changed;
• where the important behaviour lives;
• how the main pieces connect; and
• whether the result matches what you requested.

Today, you can inspect the whole application because it contains only three working files. In a larger project, you would inspect the relevant files and changes rather than read every line.

The habit remains the same: know what changed, understand the important connections and check that the result works.

This is not a lesson in memorising code. It is practice in supervising work you did not write yourself.

</aside>

Follow-along demo video:

https://supercut.ai/share/thebuildercourse/IqYk41Ja6HVlAb0DUiFWUK

The three-file model

Your Task Prioritizer has three working parts:

• index.html contains the page’s content and structure.
• styles.css controls how the page looks.
• script.js makes the page respond when someone adds, completes or deletes a task.

A simplified flow looks like this:

HTML shows the controls → JavaScript responds to an action → CSS controls how the result looks

The exact code may differ between participants. That is normal. You asked for the same behaviour, but a coding agent can implement that behaviour in more than one way.

Before you begin

Open the same challenge folder in VS Code.

In the Explorer on the left, confirm that you can see:

• AGENTS.md