First Visible Build

What this is

First Visible Build is the first real change the learner can see in the browser.

Build one section or one page only.

Why it matters

Visible progress gives confidence, but too much progress at once hides the learning.

One visible section lets the learner compare the brief, the code, and the browser result.

What to do

Choose the first visible thing from the project brief.

Good first targets:

• homepage hero
• simple menu section
• profile/about section
• service list
• contact section without a backend

Use this prompt in the IDE:

CONTEXT:
Use the project brief and files already in this chat.

CURRENT STATE:
Localhost works at http://localhost:3000

TASK:
Build ONLY the first visible section:
[name one section]

Rules:
- keep it beginner-friendly
- do not build other sections
- do not add backend
- ask me first if the project brief is missing
- explain every file changed

After AI changes the files, refresh localhost and inspect the page.

Then ask:

Explain what changed in beginner-friendly terms.

For each file:
- what changed
- why it changed
- what I should look at in the browser

Common mistakes

• Asking for the full website in one prompt.
• Accepting code without opening the browser.
• Skipping the explanation.
• Letting AI add login, database, or animations too early.