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

Build a single-page website

Write a first prompt that covers who, what and how, build a one-page site, and check it in a real browser at phone size.

Your first prompt decides most of what you get. Vague prompts get generic sites full of placeholder text. A good first prompt says who the site is for, what it must contain, how it should look, what to avoid, and how you'll check it. It doesn't need technical words: plain, specific English beats jargon every time.

What goes in a first prompt

PartWhy it mattersCrumb & Co. example
Who it's forThe agent pitches tone and layout to the readerNeighbors walking past, mostly on their phones
What's on the pageStops the agent inventing sectionsHero, about, this week's bakes, hours, location, contact
Real detailsPlaceholder text hides layout problemsTue–Sun 7am to 3pm; 14 Elm Street; hello@crumbandco.example
Look and feelGives direction without designing it yourselfWarm and simple: cream background, dark brown text, one accent color
ConstraintsKeeps the project small enough to understandPlain HTML, CSS and JavaScript; no frameworks; works on phones
Done meansGives you and the agent the same testReadable at phone width, no sideways scrolling, every section present

Notice what's missing: no talk of grids, components or font files. Describe the outcome and let the agent pick the technique. When you care about a detail, such as an exact color or the order of sections, say so.

Why plain HTML, CSS and JavaScript?
Frameworks such as React are great for big apps, but they bring build tools, dependencies and many more files. For a first project, a few plain files you can open in a browser are easier to understand, review and host for free. Your agent may suggest a framework anyway; say no for now. App builders pick their own stack, usually React, and that's fine on the builder track.
Build itExercise 1 of 2

Assemble the first prompt for the Crumb & Co. homepage. Switch on the parts that help; leave out the parts that hurt.

What gets sent
Make a website for my bakery.

Check it like a visitor

When the agent says it's finished, open the page in a real browser and look at it the way a visitor would, before you read the agent's summary. Then check it at phone size. In Chrome or Edge, right-click the page, choose Inspect, and turn on the device toolbar (the phone-and-tablet icon) to preview phone widths. Firefox calls the same feature Responsive Design Mode.

  • Is every section you asked for on the page, with your real details?
  • On a phone-sized screen, does any text run off the edge or overlap?
  • Do the links and the email address work when you click them?
  • Is there leftover filler text, such as “Your text here” or paragraphs of dummy Latin?
Quick checkExercise 2 of 2

The page looks great on your laptop, but in the phone preview the hours table runs off the right edge. What's the best next prompt?

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

  1. Ask for a plan before code

    Start your agent in the crumb-and-co folder. In Claude Code, press Shift+Tab until the status bar shows plan mode, or start the prompt with /plan. With other agents, the prompt's last line (“Show me your plan first and wait for my OK”) does the same job.

    VerifyYou know how you'll get a plan before the agent edits any files.

  2. Send the first prompt

    Paste the full prompt and read the plan that comes back. Check it lists plain files (such as index.html and styles.css) and no framework.

    prompt
    Build a one-page website for Crumb & Co., a neighborhood bakery. It's for neighbors walking by, mostly on phones, deciding whether to stop in.

Sections: a hero with the name and the tagline "Baked this morning, two doors down", about us, this week's bakes (cardamom buns, sourdough loaf, lemon tart), opening hours, location, contact.
Details: open Tuesday to Sunday, 7am to 3pm, closed Monday. 14 Elm Street. hello@crumbandco.example.
Look: warm and simple. Cream background, dark brown text, one accent color.
Constraints: one page, plain HTML, CSS and JavaScript, no frameworks or build tools. It must work well on a phone.
Done means: every section is present, it's readable at 375px wide with no sideways scrolling, and the email link opens a new message.

Show me your plan first and wait for my OK.
    VerifyThe agent replies with a plan, and no files have changed yet.

  3. Approve and let it build

    If the plan matches what you asked for, approve it. If not, say what to change, for example “skip app.js for now.” Watch the edits appear; each one shows what was added.

    Verifyindex.html and styles.css now exist in the folder.

  4. Open the page in your browser

    Ask the agent to open index.html in your browser, or do it yourself: on a Mac run open index.html, on Windows run start index.html, or double-click the file. Then do the visitor check above, including the phone preview.

    bash
    open index.html
    VerifyThe page loads with your real details, and nothing runs off the edge in the phone preview.

  5. Fix one thing, then commit

    Describe the most important problem in one specific prompt and check again. When you're happy, ask: “Commit this with a message that describes the site.”

    VerifyAsking for the git log shows a new commit on top of your first one.
Check your understanding
Q1. Why does this course ask for plain HTML, CSS and JavaScript on the first project?
Q2. What's the job of the “Done means…” line in a prompt?
· Tick off the 5 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.Plan modeA read-only agent mode: the agent may search and read, but must propose a plan for your approval before it edits anything.Agent modeA named preset that bundles a permission mode with behavioural instructions, switchable in the middle of a session.

Plain-English definitions from the AI Coding Dictionary.