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 Explorer and name the copy index-before-changes.html. Keep editing index.html. This gives you a simple way back if a change causes trouble.
If you already use Git, a commit can serve the same purpose. If you don’t, the file copy is enough for this activity.
2. Try to confuse it (a little)
Use the list below as a test log. For each check, record what happened, not just “looks good.”
- Empty input: Try adding a task with no title. The app should explain what’s missing.
- Bad time: Try 0 or a negative estimate. It should reject the entry rather than treating it as useful work.
- At the limit: A 30-minute task should fit a 30-minute window; a 31-minute task should not.
- Nothing left: Complete every task. The recommendation area should show a useful empty state.
- Narrow window: Make the browser window narrow. Can you still read the labels and use the controls without sideways scrolling?
- Keyboard: Use Tab to reach fields and buttons, then Enter or Space to activate a button. Can you see where the keyboard focus is?
3. Report one problem clearly
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.
TRY THIS PROMPT
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.
Show the problem, not your whole desktop. On a Mac, press Shift–Command–4 and drag around the relevant part of your browser. On Windows, press Windows–Shift–S and select the area. Include the input and unexpected result. Attach the saved image to your Codex message, then explain what you expected.
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.
WHAT IF NOTHING FAILED?
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’t invent a bug for the assignment.
4. Make one intentional change
Choose one option. You can always do more later, but get one improvement working first.
Make it feel like you
Choose two colors, a title, and a visual reference you’re allowed to use. Describe the qualities you want: compact, playful, calm, bold. Be specific about spacing, hierarchy, and contrast.
TRY THIS PROMPT
Keep the planner’s 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.
Make the recommendations more useful
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.
Keep tasks between visits
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.
Storage behavior for files opened directly can vary by browser. Test yours; don’t assume it works. Browser storage is not a backup and does not sync across computers. Keep using made-up data. If saving isn’t reliable, ask for a download/import backup option as a later improvement.
5. Know when to stop and reset
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’ve checked the result.
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 “please fix it.”
BEFORE YOU MOVE ON
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?