{"id":19,"date":"2026-09-24T20:19:38","date_gmt":"2026-09-24T20:19:38","guid":{"rendered":"https:\/\/nmi.cool\/ai\/?page_id=19"},"modified":"2026-09-28T05:08:10","modified_gmt":"2026-09-28T05:08:10","slug":"04-build-something","status":"publish","type":"page","link":"https:\/\/nmi.cool\/ai\/04-build-something\/","title":{"rendered":"04 Build something"},"content":{"rendered":"

LESSON 04 \/ 25 MINUTES<\/strong><\/p>

Okay, let\u2019s make the thing. You have a folder, a goal, and a short plan. Now we\u2019ll turn that plan into a first version you can actually use.<\/p>

EXAMPLE PROJECT \u00b7 A WEBSITE YOU\u2019LL BUILD<\/strong><\/p>

\u25cf \u25cf \u25cf<\/span>   nmi-codex-lab \/ index.html<\/span><\/div>

MY WEEK, UNSTUCK.<\/p>

What can you finish
in 30 minutes?<\/h3>

START HERE<\/p>

Sketch three homepage ideas<\/strong><\/p>

Due tomorrow \u00b7 25 minutes<\/p><\/div>

YOUR TASKS<\/p>

\u25cb   Review lecture notes \u00b7 20 min<\/span><\/div>
\u25cb   Draft project proposal \u00b7 45 min<\/span><\/div>
\u2713   Choose a project topic<\/s><\/div><\/div><\/div>
A sample layout, not a live app.<\/strong> This is the kind of website you\u2019ll make with Codex. It opens in your browser; Codex is where you ask for changes. Your version can look different.<\/figcaption><\/figure>

1. Give Codex the go-ahead<\/h2>

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.<\/p>

TRY THIS PROMPT<\/strong><\/p>

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\u2019t 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.<\/p><\/div>

2. Watch what happens<\/h2>

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.<\/p>

If it starts setting up a large application or installing packages, steer it back: \u201cThis is a single-file beginner exercise. Please keep the app in index.html and make it open directly in my browser.\u201d<\/p>

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

    WHERE TO LOOK IN CODEX<\/strong><\/p>

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

    For current browser controls and examples, see OpenAI\u2019s Browser guide<\/a>.<\/p><\/div>

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

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

    01<\/p>

    CODEX CHAT<\/strong><\/p>

    Ask for a change.<\/p><\/div>

    02<\/p>

    index.html<\/strong><\/p>

    The saved file changes.<\/p><\/div>

    03<\/p>

    CODEX BROWSER<\/strong><\/p>

    Refresh. Try it yourself.<\/p><\/div><\/div>

    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.<\/figcaption><\/figure>

    4. Take it for a test drive<\/h2>

    Your version may look different from the illustration on the home page. That\u2019s expected. Check the behavior first:<\/p>

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

      If something fails, write down the action and result. You\u2019ll fix it in the next lesson. If you can\u2019t open the app at all, use this prompt now:<\/p>

      TRY THIS PROMPT<\/strong><\/p>

      I\u2019m 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.<\/p><\/div>

      5. Ask one \u201chow\u201d question<\/h2>

      TRY THIS PROMPT<\/strong><\/p>

      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\u2019t change the code.<\/p><\/div>

      You don\u2019t need to memorize the answer. See whether you can describe the rule yourself. If the rule doesn\u2019t match your brief, that\u2019s useful feedback to give Codex.<\/p>

      BEFORE YOU MOVE ON<\/strong><\/p>

      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.<\/p><\/div>

      \u2190 Give it a brief<\/a> \u00b7 Workbook home<\/a> \u00b7 Make it better \u2192<\/a><\/p><\/div>","protected":false},"excerpt":{"rendered":"

      LESSON 04 \/ 25 MINUTES Okay, let\u2019s make the thing. You have a folder, a goal, and a short plan. Now we\u2019ll turn that plan into a first version you can actually use. EXAMPLE PROJECT \u00b7 A WEBSITE YOU\u2019LL BUILD \u25cf \u25cf \u25cf   nmi-codex-lab \/ index.html MY WEEK, UNSTUCK. What can you finishin 30 … Continue reading 04 Build something<\/span><\/a><\/p>\n","protected":false},"author":27,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-19","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/ai\/wp-json\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/ai\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/ai\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/ai\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/ai\/wp-json\/wp\/v2\/comments?post=19"}],"version-history":[{"count":3,"href":"https:\/\/nmi.cool\/ai\/wp-json\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/nmi.cool\/ai\/wp-json\/wp\/v2\/pages\/19\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/ai\/wp-json\/wp\/v2\/media?parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}