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

Pick one target from the build order in project-brief.md. Use design-spec.md to guide the first look and feel.

Use this prompt in the IDE:

Before writing code, read these files:
- project-brief.md
- design-spec.md

Use them as the source of truth.

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

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

Rules:
- keep it beginner-friendly
- match the project brief
- follow the design spec for layout, colors, and component style
- do not build other sections
- do not add login, database, payment, or backend features
- do not add advanced animations
- ask me first if either file is missing or unclear
- explain every file changed

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

Compare the browser result with both files:

• Does the section match the goal in project-brief.md?
• Does it follow the mood, colors, layout, and component style in design-spec.md?
• Is it readable on mobile?
• Is it still only one section?

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.
• Ignoring the design spec and accepting a generic-looking section.