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.

If something breaks, use this prompt:

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.
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:

TASK:
Make one small improvement:
[color / spacing / wording / one extra item]

Keep the structure simple.
Do not add a new feature.

Finish with a design polish pass:

TASK:
Polish this first section.

Improve:
- spacing
- readability
- mobile view

Keep the design simple and do not change the project goal.

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.