04 Build something

LESSON 04 / 25 MINUTES

Okay, let’s make the thing. You have a folder, a goal, and a short plan. Now we’ll turn that plan into a first version you can actually use.

EXAMPLE PROJECT · A WEBSITE YOU’LL BUILD

  nmi-codex-lab / index.html

MY WEEK, UNSTUCK.

What can you finish
in 30 minutes?

START HERE

Sketch three homepage ideas

Due tomorrow · 25 minutes

YOUR TASKS

○   Review lecture notes · 20 min

○   Draft project proposal · 45 min

✓   Choose a project topic

A sample layout, not a live app. This is the kind of website you’ll make with Codex. It opens in your browser; Codex is where you ask for changes. Your version can look different.

1. Give Codex the go-ahead

Stay in the same task so Codex has the plan you just discussed. Copy the prompt below, adjust the name or audience if you want, and send it. The feature list is deliberately small enough to test today.

TRY THIS PROMPT

Build the first version of My Week, Unstuck using the plan we discussed. Create a single index.html file containing the HTML, CSS, and JavaScript. It must work when I open the file directly in a browser. Use no external libraries, downloads, accounts, APIs, or server. Let me add a task with a title, due date, and positive whole-number estimate in minutes. Show unfinished tasks by earliest due date. Let me mark a task complete and see completed tasks separately. Add an available-minutes filter that shows only unfinished tasks that fit. Recommend the earliest-due matching task, and clearly say when none fit. Use three made-up sample tasks labeled as examples. Include visible form labels, readable contrast, keyboard-friendly controls, and a layout that works on a narrow screen. Keep this first version in memory; saving between visits comes later. Don’t publish it or change anything outside this folder. When finished, tell me what files you created, how to open the app, what you checked, and anything I still need to test.

2. Watch what happens

Codex may describe its steps, create a file, and report checks. Let it finish, but read the updates. If it asks a question, answer it. If it requests something outside this plan, ask why it needs it before agreeing.

If it starts setting up a large application or installing packages, steer it back: “This is a single-file beginner exercise. Please keep the app in index.html and make it open directly in my browser.”

3. Open your app in Codex’s browser

  1. When Codex finishes, read its reply and confirm it created index.html inside nmi-codex-lab. If it did not, ask Codex to finish that file before you continue.
  2. In the same chat, ask: “Open the index.html in nmi-codex-lab in your built-in browser so I can try it.” Codex can open your local page in a browser tab beside the chat.
  3. If the browser panel is hidden, open it from the Browser control in the Codex toolbar. You can also press Command-Shift-B on Mac or Ctrl-Shift-B on Windows. Select the tab showing your planner.
  4. Try the planner in that tab. After Codex changes index.html, select the browser tab and refresh it with the reload button, Command-R on Mac, or Ctrl-R on Windows.

WHERE TO LOOK IN CODEX

Chat: ask Codex to open the page and make changes. Browser tab: click and test the page, then refresh after changes. index.html: the saved file in your project folder.

For current browser controls and examples, see OpenAI’s Browser guide.

If you prefer a separate browser, open nmi-codex-lab in Finder (Mac) or File Explorer (Windows) and double-click index.html. If it opens in a text editor, right-click it, choose Open With, and select your browser. On a large screen or with two screens, you can keep that browser and Codex side by side.

A file open on your computer is local. It is not a public website, and sending someone its file path will not give them access to it.

01

CODEX CHAT

Ask for a change.

02

index.html

The saved file changes.

03

CODEX BROWSER

Refresh. Try it yourself.

The conversation, the saved file, and the browser preview are three different things. If the page still looks the same after an edit, refresh the browser and check that it shows the file from nmi-codex-lab.

4. Take it for a test drive

Your version may look different from the illustration on the home page. That’s expected. Check the behavior first:

  1. Add “Outline my project,” due tomorrow, with an estimate of 20 minutes.
  2. Add “Make three sketches,” due the following day, with an estimate of 45 minutes.
  3. Set your available time to 30 minutes. The 20-minute task should fit; the 45-minute task should not.
  4. Complete the 20-minute task. It should leave the unfinished list and stop being recommended.
  5. Set your available time to 5 minutes. If no unfinished task fits, the app should say so.

If something fails, write down the action and result. You’ll fix it in the next lesson. If you can’t open the app at all, use this prompt now:

TRY THIS PROMPT

I’m trying to open index.html on [Mac/Windows]. I did [the exact steps]. I expected the planner, but I saw [what happened, including any error text]. Check the file and fix the smallest thing needed to make it open directly in my browser. Explain what changed.

5. Ask one “how” question

TRY THIS PROMPT

Show me the part of the code that decides which task to recommend. Explain it in plain language, then walk through one example using a 20-minute task and a 30-minute time limit. Don’t change the code.

You don’t need to memorize the answer. See whether you can describe the rule yourself. If the rule doesn’t match your brief, that’s useful feedback to give Codex.

BEFORE YOU MOVE ON

You can open your planner, add a task, and describe at least one behavior you checked. Save a screenshot of the first version and note one thing you want to improve. For now, refreshing resets the tasks; we asked for that simple first version.

← Give it a brief · Workbook home · Make it better →