Test, Debug, Improve

What this is

This is the checkpoint where the learner proves the first visible build actually works.

The loop is:

test -> debug -> one learner change -> polish

Why it matters

Shipping is not just generating code.

The learner needs to see problems, name them clearly, fix one thing at a time, and improve the page before saving it to GitHub.

What to do

Test the page in the browser:

1. Refresh localhost.
2. Click every visible button or link.
3. Check the page on a narrow phone width.
4. Read the text out loud and remove confusing copy.
5. Confirm the first section still matches the project brief.
6. Confirm the first section follows the design spec.

If something breaks, use this prompt:

Read project-brief.md and design-spec.md first.

This is the exact problem:
[what I clicked or tested]

What happened:
[what the browser showed]

Expected:
[what should happen]

Fix only this problem first.
Do not add new features.
Explain the fix after.

For more debugging prompts, open Prompt Lab, open Browse, and choose the Fix group.

Then add one small learner change request:

Read project-brief.md and design-spec.md first.

TASK:
Make one small improvement:
[spacing / wording / button clarity / card clarity / mobile layout]

Keep the structure simple.
Do not add a new feature.
Keep it aligned with the design spec.

Finish with a design polish pass:

Read design-spec.md first.

TASK:
Polish this first section.

Improve:
- spacing
- readability
- mobile view
- button or card clarity
- alignment with the design spec

Keep the design simple and do not change the project goal.
Do not add a new section or feature.

Before moving to GitHub, check:

Localhost works.
The first section matches project-brief.md.
The visual style matches design-spec.md.
Mobile width is readable.
No new feature was added by accident.

Common mistakes

• Debugging three errors in one prompt.
• Calling the page done without testing mobile width.
• Adding a new feature instead of improving the first section.
• Saving to GitHub while the browser is still broken.
• Polishing in a direction that ignores the saved design spec.