{"id":21,"date":"2026-09-24T20:22:14","date_gmt":"2026-09-24T20:22:14","guid":{"rendered":"https:\/\/nmi.cool\/ai\/?page_id=21"},"modified":"2026-09-25T15:07:55","modified_gmt":"2026-09-25T15:07:55","slug":"05-make-it-better","status":"publish","type":"page","link":"https:\/\/nmi.cool\/ai\/05-make-it-better\/","title":{"rendered":"05 Make it better"},"content":{"rendered":"<div style=\"font-family:Arial,sans-serif;font-size:18px;line-height:1.8;color:#000000\"><p style=\"font-size:12px;letter-spacing:1.5px;color:#434343\"><strong>LESSON 05 \/ 25 MINUTES<\/strong><\/p><p>The first version is a starting point. Now comes the part that makes it yours: trying it like a real person, noticing what gets in the way, and giving Codex better direction.<\/p><h2 style=\"color:#7D12FF;font-family:Arial,sans-serif\">1. Save a version you can return to<\/h2><p>Before the next change, duplicate index.html in Finder or File Explorer and name the copy <strong>index-before-changes.html<\/strong>. Keep editing index.html. This gives you a simple way back if a change causes trouble.<\/p><p>If you already use Git, a commit can serve the same purpose. If you don\u2019t, the file copy is enough for this activity.<\/p><h2 style=\"color:#7D12FF;font-family:Arial,sans-serif\">2. Try to confuse it (a little)<\/h2><p>Use the list below as a test log. For each check, record what happened, not just \u201clooks good.\u201d<\/p><ul><li><strong>Empty input:<\/strong> Try adding a task with no title. The app should explain what\u2019s missing.<\/li><li><strong>Bad time:<\/strong> Try 0 or a negative estimate. It should reject the entry rather than treating it as useful work.<\/li><li><strong>At the limit:<\/strong> A 30-minute task should fit a 30-minute window; a 31-minute task should not.<\/li><li><strong>Nothing left:<\/strong> Complete every task. The recommendation area should show a useful empty state.<\/li><li><strong>Narrow window:<\/strong> Make the browser window narrow. Can you still read the labels and use the controls without sideways scrolling?<\/li><li><strong>Keyboard:<\/strong> Use Tab to reach fields and buttons, then Enter or Space to activate a button. Can you see where the keyboard focus is?<\/li><\/ul><figure style=\"margin:28px 0;border:1px solid #CCCCCC;border-radius:10px;overflow:hidden\"><div style=\"padding:18px 22px;background:#000;color:#fff\"><strong>The one-minute test<\/strong><br><span style=\"font-size:14px\">Available time: 30 minutes<\/span><\/div><div style=\"display:flex;flex-wrap:wrap\"><div style=\"padding:22px;flex:1 1 160px;background:#effbfc;border-top:5px solid #00A3AD\"><p style=\"font-size:34px;margin:0;color:#000\"><strong>30<\/strong><span style=\"font-size:14px\"> min<\/span><\/p><p style=\"font-size:16px;margin:8px 0 0\"><strong>\u2713 Should appear<\/strong><br>Exactly at the limit.<\/p><\/div><div style=\"padding:22px;flex:1 1 160px;background:#fff3f5;border-top:5px solid #BA0C2F\"><p style=\"font-size:34px;margin:0;color:#000\"><strong>31<\/strong><span style=\"font-size:14px\"> min<\/span><\/p><p style=\"font-size:16px;margin:8px 0 0\"><strong>\u00d7 Should be filtered out<\/strong><br>One minute over.<\/p><\/div><\/div><figcaption style=\"padding:16px 22px;font-size:14px;color:#434343\">Expected behavior, illustrated. Add both as unfinished tasks in your own app. A good-looking filter can still use the wrong rule.<\/figcaption><\/figure><h2 style=\"color:#7D12FF;font-family:Arial,sans-serif\">3. Report one problem clearly<\/h2><p>Pick a failed check or something that made the app harder to use. Tell Codex what you did, what happened, and what you expected. Include the exact error text or a screenshot when it helps. Remove private information from screenshots first.<\/p><div style=\"background-color:#f6f0ff;border-left:4px solid #7D12FF;padding:22px;margin:28px 0\"><p style=\"font-family:Arial,sans-serif;font-size:13px;letter-spacing:1px;color:#7D12FF\"><strong>TRY THIS PROMPT<\/strong><\/p><p style=\"font-family:Arial,sans-serif;font-size:17px;line-height:1.7\">When I [steps], the app [actual result]. I expected [expected result]. Please find the cause and fix the smallest relevant part. Keep the existing features and visual style. Explain what changed, what you checked, and how I can verify the fix myself.<\/p><\/div><div style=\"margin:24px 0;border-left:4px solid #00A3AD;padding:16px 22px;background:#effbfc\"><p style=\"margin:0;font-size:15px\"><strong>Show the problem, not your whole desktop.<\/strong> On a Mac, press Shift\u2013Command\u20134 and drag around the relevant part of your browser. On Windows, press Windows\u2013Shift\u2013S and select the area. Include the input and unexpected result. Attach the saved image to your Codex message, then explain what you expected.<\/p><\/div><p>Refresh and repeat the exact check that failed. Then try adding, filtering, and completing a task again. A fix should solve the problem without breaking something that already worked.<\/p><div style=\"background-color:#f6f0ff;border-left:4px solid #7D12FF;padding:22px;margin:28px 0\"><p style=\"font-family:Arial,sans-serif;font-size:13px;letter-spacing:1px;color:#7D12FF\"><strong>WHAT IF NOTHING FAILED?<\/strong><\/p><p>Good! Ask a classmate to try one task without instructions, or test a very long task title. If you still find no issue, record the checks that passed and choose one usability improvement. Don\u2019t invent a bug for the assignment.<\/p><\/div><h2 style=\"color:#7D12FF;font-family:Arial,sans-serif\">4. Make one intentional change<\/h2><p>Choose one option. You can always do more later, but get one improvement working first.<\/p><details open><summary><strong>Make it feel like you<\/strong><\/summary><p>Choose two colors, a title, and a visual reference you\u2019re allowed to use. Describe the qualities you want: compact, playful, calm, bold. Be specific about spacing, hierarchy, and contrast.<\/p><div style=\"background-color:#f6f0ff;border-left:4px solid #7D12FF;padding:22px;margin:28px 0\"><p style=\"font-family:Arial,sans-serif;font-size:13px;letter-spacing:1px;color:#7D12FF\"><strong>TRY THIS PROMPT<\/strong><\/p><p style=\"font-family:Arial,sans-serif;font-size:17px;line-height:1.7\">Keep the planner\u2019s behavior. Restyle it with [colors and visual direction]. Make the next recommended task the clearest element, give the form more breathing room, and keep text easy to read. Explain which design choices changed and why.<\/p><\/div><\/details><details><summary><strong>Make the recommendations more useful<\/strong><\/summary><p>Add a category such as class, creative work, or life admin. Ask for a category filter that works together with the available-minutes filter. Test with two tasks in different categories but with the same estimate.<\/p><\/details><details><summary><strong>Keep tasks between visits<\/strong><\/summary><p>Ask Codex to add browser storage, often called localStorage, plus a clear-data control with confirmation. Require a visible message if storage is unavailable. Test by adding a unique task, refreshing, and reopening the file.<\/p><p>Storage behavior for files opened directly can vary by browser. Test yours; don\u2019t assume it works. Browser storage is not a backup and does not sync across computers. Keep using made-up data. If saving isn\u2019t reliable, ask for a download\/import backup option as a later improvement.<\/p><\/details><h2 style=\"color:#7D12FF;font-family:Arial,sans-serif\">5. Know when to stop and reset<\/h2><p>If a change makes the app worse, say exactly which change you want reversed. If you need the earlier version, open index-before-changes.html to confirm it works. You can copy its contents back into index.html or ask Codex to restore from that named backup. Keep the backup until you\u2019ve checked the result.<\/p><p>After two attempts at the same problem, pause. Ask Codex to explain what it thinks is causing the issue and what evidence it has. A clearer diagnosis is usually more useful than a third \u201cplease fix it.\u201d<\/p><div style=\"background-color:#f6f0ff;border-left:4px solid #7D12FF;padding:22px;margin:28px 0\"><p style=\"font-family:Arial,sans-serif;font-size:13px;letter-spacing:1px;color:#7D12FF\"><strong>BEFORE YOU MOVE ON<\/strong><\/p><p>You have recorded at least three test results, verified a fix or usability improvement, and made one intentional change. Take a second screenshot. Can you point to what got better and explain why?<\/p><\/div><hr><p style=\"font-family:Arial,sans-serif;font-size:16px\"><a style=\"color:#2727E6\" href=\"https:\/\/nmi.cool\/ai\/04-build-something\/\">\u2190 Build something<\/a> \u00b7 <a style=\"color:#2727E6\" href=\"https:\/\/nmi.cool\/ai\/getting-started-with-codex\/\">Workbook home<\/a> \u00b7 <a style=\"color:#2727E6\" href=\"https:\/\/nmi.cool\/ai\/06-make-it-yours\/\">Make it yours \u2192<\/a><\/p><\/div>","protected":false},"excerpt":{"rendered":"<p>LESSON 05 \/ 25 MINUTES The first version is a starting point. Now comes the part that makes it yours: trying it like a real person, noticing what gets in the way, and giving Codex better direction. 1. Save a version you can return to Before the next change, duplicate index.html in Finder or File &hellip; <a href=\"https:\/\/nmi.cool\/ai\/05-make-it-better\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">05 Make it better<\/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-21","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/ai\/wp-json\/wp\/v2\/pages\/21","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=21"}],"version-history":[{"count":2,"href":"https:\/\/nmi.cool\/ai\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":48,"href":"https:\/\/nmi.cool\/ai\/wp-json\/wp\/v2\/pages\/21\/revisions\/48"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/ai\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}