Vibe Coding for Beginners: From Zero to App/Develop a website
Lesson 3 / 4 · 30 min · 0 / 2 exercises
Course contents
Project · 2 hands-on exercises

Improve your site

Improve your site in small, specific steps: describe visual changes precisely, run phone and accessibility passes, and undo cleanly when a change goes wrong.

Your first version is a draft. Improving it is where vibe coding shines, as long as you change one thing at a time. Small, specific requests are easy for the agent to get right and easy for you to check. Big, vague ones, such as “make it pop”, produce big, surprising changes that are hard to review and harder to undo.

Describe changes like a good client

Say where the change is, what it looks like now, and what you want instead. “The buttons in the hero are gray and hard to see; make them the accent color with white text” beats “make the buttons better.” When words fail, take a screenshot. Most agents and builders accept images: paste or attach one and say what's wrong in it.

Sort itExercise 1 of 2

Is this feedback specific enough to send?

Card 1 of 6

“Fix the mobile stuff.”

Three passes worth doing

  1. Phone pass. Check every section in the phone preview: text that's too small, buttons too close together, anything that scrolls sideways. Most visitors to a local business arrive on a phone.
  2. Accessibility pass. Every image needs alt text that describes it, text needs strong contrast with its background, headings should go in order, and the whole page should work with the keyboard alone (press Tab to move through it). These help everyone, including people who use screen readers.
  3. Personal pass. Add one thing that makes the site yours: a real photo, a small icon for the browser tab, the owner's story in her own words.
Ask the agent to explain
When a change surprises you, ask: “Explain what you changed and why, in plain English, file by file.” It's the fastest way to learn what your code does, and agents are good at it.

When a change goes wrong, go back

Sometimes a change makes things worse, or the agent “improves” parts you didn't ask about. Don't try to prompt your way back to the old version; the agent will guess at what it was. Undo instead, then ask again more narrowly. Your options: restore the last commit (“discard the uncommitted changes and go back to the last commit”), use your tool's checkpoints (/rewind in Claude Code, Restore Checkpoint in Cursor), or pick an earlier version in your builder's history.

You make the callExercise 2 of 2

The font that ate the homepage

You ask the agent to change the headings to a friendlier font.

  1. The new font looks good, but the agent also changed the colors, the spacing and the hero layout. It says it “refreshed the design for consistency.”

Definition of done0 / 5
Pick your track · finish either one
Steps · 0 / 4 done

  1. Run the phone pass

    Open the page in the phone preview and list what's wrong. Send one fix per prompt, using the template below, and reload the page after each one.

    prompt
    On a 375px-wide screen, [describe what's wrong and where]. Change only that, and don't touch the other sections.
    VerifyEach fix looks right in the phone preview before you send the next one.

  2. Run the accessibility pass

    Ask the agent to find problems before it fixes anything, so you see the list.

    prompt
    Check this site for accessibility: descriptive alt text on every image, strong contrast between text and background, headings in a sensible order, and everything usable with the keyboard alone. List the problems you find first. Then fix them one at a time, and tell me what you changed.
    VerifyThe agent lists specific issues and fixes them, and pressing Tab moves through every link and button in a sensible order.

  3. Commit each good change

    After each change you like, ask the agent to commit it with a message that describes it. After one you don't like, undo it: /rewind in Claude Code, or ask any agent to discard the uncommitted changes.

    VerifyThe git log shows one commit per improvement.

  4. Practice an undo

    Ask for a change you're unsure about, such as a dark background. Look at it, then undo it on purpose. Knowing undo works makes you braver with every change after this.

    VerifyThe site is back exactly as it was before the experiment.
Check your understanding
Q1. Why make one change per prompt?
Q2. Which request belongs in an accessibility pass?
· Tick off the 4 step(s) above.
· Work through the 2 remaining exercises above (stuck? each one can show you the answer).
· Score 100% on the quiz.
Vocabulary in this lesson
AgentA model wired to tools and a loop: it reads, acts, checks the result, and goes again until the task is done or you stop it.CheckpointA saved state of your files, and sometimes the conversation, that you can rewind to after a turn goes wrong.Vibe codingBuilding software by describing what you want to an agent and judging the result rather than reading every line of code.

Plain-English definitions from the AI Coding Dictionary.