Akademiacademy / vibe-101 / test-debug-improve

Test, Debug, Improve

Apa ini

Ini checkpoint untuk prove first visible build benar-benar berfungsi.

Loop dia:

Flow

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

Kenapa penting

Ship bukan sekadar generate code.

Pelajar perlu nampak masalah, namakan dengan jelas, fix satu benda pada satu masa, dan improve page sebelum simpan ke GitHub.

Apa nak buat

Test page dalam browser:

  1. Refresh localhost.
  2. Click setiap button atau link yang nampak.
  3. Check page pada narrow phone width.
  4. Baca text kuat-kuat dan buang copy yang confusing.
  5. Confirm first section masih ikut project brief.

Kalau ada benda rosak, guna prompt ini:

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

Untuk prompt debug tambahan, buka Prompt Lab, buka Browse, dan pilih group Fix.

Kemudian tambah satu small learner change request:

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

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

Akhir sekali buat design polish pass:

Copy prompt
TASK:
Polish this first section.

Improve:
- spacing
- readability
- mobile view

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

Mistake biasa

  • Debug tiga error dalam satu prompt.
  • Anggap page done tanpa test mobile width.
  • Tambah feature baru, bukan improve first section.
  • Simpan ke GitHub masa browser masih rosak.

Vibe 101 / Checkpoint sekarang

Test, Debug, Improve

Sedia untuk stamp - Disimpan dalam browser ini sahaja.

0 daripada 15 checkpoints complete

0 daripada 15 checkpoints complete.