Finish your first small project

Back to the Codex learning hub

What you will be able to do

Before starting: choose the right version

Download the Small Steps exercise and extract start, broken and expected. Copy only expected into a new codex-first-site folder and retain the extracted original. Filtering is unfinished in start and deliberately wrong in broken; those versions belong to later lessons. Do not merge the three folders or you will lose track of the version being checked.

The copy's root should directly contain index.html, style.css, app.js, core.mjs and core.test.mjs. HTML defines structure, CSS presentation, app.js browser interaction, core.mjs data behavior and the test file core checks. You need not understand everything yet, but all five files must exist. You need Codex, Node.js and Python 3; if already installed, verify commands rather than reinstalling.

Open PowerShell in this folder on Windows or a terminal on macOS/Linux. See terminal paths if location checks are unfamiliar. Check Python with py --version on Windows or python3 --version elsewhere; use node --version on all three. If a command is missing, install the corresponding tool and reopen the terminal. There is no package.json here, so do not use npm install or npm test.

Step 1: establish a working baseline

Run the core tests at the copy's root. Expect three passing tests and zero failures. This is evidence from before the edit. If tests already fail, check whether you copied start or broken or omitted a file. Do not ask for visual edits and every unrelated fix on a broken baseline; that obscures which result belongs to which request.

node --test core.test.mjs

On Windows, start the preview with the command below. Keep this terminal open while it displays server logs; it is not supposed to immediately return to a prompt. Open another terminal for other commands. The server binds only to the local address 127.0.0.1.

py -m http.server 4173 --bind 127.0.0.1

On macOS or Linux, use the equivalent command below. Run only the one for your platform; two servers cannot share port 4173. If your other exercise already uses it, stop that identified server or use 4174 and consistently change the URL.

python3 -m http.server 4173 --bind 127.0.0.1

Open http://127.0.0.1:4173 in your browser. If this origin contains fictional tasks you want to keep, record them first. Open About this exercise, choose Reset practice data, select All tasks, and confirm the list is empty. This resets practice data only; it does not restore source files. Add Read and Build, complete Read, then check that Completed shows only Read and Active only Build. Refresh to confirm persistence. Double-clicking index.html may prevent module loading under a file URL; use the HTTP address of the running server.

Step 2: inspect before requesting edits

Select codex-first-site as a desktop project, or start CLI at its root. First request a read-only summary of the five files, working directory and test command. Confirm that the agent recognizes a static site without a package installation step, then send the complete request below. Even a small visual edit should state which behavior must be preserved.

Work only in this codex-first-site practice folder.
1. In index.html, set the h1 text to "Small steps, clear progress."
2. In style.css, set the :root background to #fff8ed.
Keep all todo behavior, labels, storage keys and data formats unchanged.
Do not add packages or external requests. Do not deploy the site.
Run node --test core.test.mjs.
Check the page at 390px and 1280px if browser access is available.
Report changed files, checks performed and any checks not run.

The intended diff changes only the h1 in index.html and background color in style.css, not a wholesale HTML rewrite or a different data framework. If Codex lacks browser tools, it should mark visual checks as not run so that you can perform them. Do not invite guessed screenshots or treat absence of error messages as visual acceptance.

Step 3: independently verify the result

Reopen the two files and verify the requested text and color. Run core tests again and retain the result. Refresh the browser to check heading, background and the existing Read and Build items. At about 390px, the full page should not scroll horizontally; at 1280px, inspect content width. A narrow viewport checks responsive layout, not physical iPhone or Android behavior.

Check two boundaries: whitespace alone must not add a task, and the sample below must display as text rather than becoming an image. Use Tab to reach the input, button, filter and checkbox with visible focus. These checks catch data-handling or keyboard regressions accompanying a visual edit. Core tests do not automatically inspect CSS appearance, so examine both kinds of evidence.

<img src=x>

Troubleshooting, stopping and restoring

A directory listing means the server started too high in the folder tree: stop it, enter the copy directly containing index.html and restart. For a busy port, identify your preview or choose another port rather than stopping unrelated services. If edits do not appear, check saving, URL, folder and refresh. A different port uses a different browser storage origin, so missing todos do not necessarily mean the code deleted them.

Stop the preview with Ctrl+C in the Python terminal. Restore only index.html and style.css from the retained expected original, or undo the two edited lines. Do not clear all browser data. To remove practice todos, Reset practice data under About this exercise targets this exercise's storage key. Retain any fictional records you need before using it.

Practice and verification notes

For independent practice, change only the heading to another English sentence, preserve all behavior and repeat normal and empty-input cases. Finish by delivering the actual diff, test results, observations at both widths and checks not run. Continue with writing requests, project instructions and testing and review to make the process repeatable.

The materials are an original, shareable fictional website. Reference core and browser behavior were verified on Windows/Edge; other OS startup instructions are not claimed as hands-on tests. Codex entry points were checked on 2026-09-20 against the official quickstart and CLI documentation. Images illustrate exercise results, not Codex product UI.

Record expectations separately from actual checks

The table below lists expected acceptance results, not a record of your run. Separately record four things: files actually changed; the test working directory and pass/fail counts; actual visual results at 390px and 1280px; and unfinished checks. All three core tests can pass while the heading or background is wrong because these tests cover todo data logic. If preview is unavailable, mark visual checks as not run and leave them pending; a color value in source code is not a visual result.

Back to the Codex learning hub

Read the full description

Request to index.html to Browser

• AI tools
• Tutorials
• Codex