Vibe Coding for Beginners: From Zero to App/Use a coding agent
Lesson 3 / 4 · 40 min · 0 / 1 exercises
Course contents
Project · 1 hands-on exercise

Build a dynamic website

Make part of your site update from data: a specials board built from a JSON file, an “Open now” badge and a filter, previewed on a local server.

So far your site is static: every word is typed into the HTML. Now you'll make part of it dynamic, meaning the page builds itself from data and reacts to the visitor. The owner will update this week's specials by editing one small data file, and the page will show “Open now” or “Closed” based on the time. Content in one place, layout in another: that's the pattern behind most of the web.

Content in a data file

The specials will live in a file called specials.json. JSON is a simple text format for data: a name in double quotes, a colon, then a value. Your agent will write the JavaScript that reads the file and turns each item into a card on the page. The owner never touches the HTML; she edits the list.

specials.json (the shape you'll ask for)
{
  "week": "2026-11-09",
  "items": [
    { "name": "Cardamom buns", "price": 4.5, "tags": ["vegetarian"], "soldOut": false },
    { "name": "Pumpkin sourdough", "price": 9, "tags": ["vegan"], "soldOut": false },
    { "name": "Pecan tart", "price": 6.25, "tags": ["vegetarian"], "soldOut": true }
  ]
}

Notice the rules: double quotes around every name, and commas between items but not after the last one. One missing comma makes the whole file unreadable. You'll break it on purpose in the next lesson and watch what happens.

Why you need a local preview server now

Until now you could double-click index.html. That stops working once the page loads specials.json: for security, browsers don't let a page opened straight from your disk read other files. The fix is a tiny local server, a program on your own computer that serves the folder at an address such as http://localhost:8000. Only you can see it. Ask your agent to start one; it will use whatever your computer already has, often Python or Node.js, and may offer to install something.

Quick checkExercise 1 of 1

The specials appeared when the agent tested them, but when you double-click index.html, the specials section is empty. Why?

Three dynamic features, one at a time

  1. Specials from data. Cards built from specials.json, with a “Sold out” badge when soldOut is true.
  2. Open now. A badge that says “Open now” or “Closed” from the opening hours and the visitor's current time.
  3. Filter. Buttons for All, Vegan and Vegetarian that show only matching items.

Build them in that order, one prompt each, and check each in the browser before you ask for the next. That's the small-steps lesson in practice. Commit after each one, so a problem in feature three never costs you features one and two.

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

  1. Plan the data file and the features

    Start the agent in your project folder, in plan mode if your agent has one. Answer its questions, then read the plan.

    prompt
    I want part of the Crumb & Co. site to be dynamic. Specials change every Monday and the owner isn't technical, so she'll update them by editing a specials.json file.

Plan three features, to build one at a time:
1. A "This week's specials" section built from specials.json, with a "Sold out" badge on sold-out items.
2. An "Open now" or "Closed" badge based on our hours (Tuesday to Sunday, 7am to 3pm, closed Monday) and the visitor's current time.
3. Filter buttons for All, Vegan and Vegetarian.

Constraints: plain JavaScript, no new packages, and don't change the other sections.
Done means: I edit specials.json, reload, and the change appears; everything works at 375px wide.

Ask me any questions first, then show the plan and wait for my OK.
    VerifyThe plan lists specials.json and a JavaScript file, and adds no new packages.

  2. Build feature 1 and start a preview server

    Approve the plan for the first feature only. Then ask for a preview server.

    prompt
    Build feature 1 only. Then start a local preview server for this folder and tell me the address to open.
    VerifyOpening the address (such as http://localhost:8000) shows the specials cards, with a badge on the sold-out item.

  3. Prove it's dynamic

    Open specials.json in any text editor and change a price, or ask the agent to add an item. Save, then reload the page. Commit once it works.

    VerifyThe change appears on the page without anyone touching index.html.

  4. Build features 2 and 3, one at a time

    Ask for the Open now badge, check it against the real hours, and commit. Then ask for the filter, check every button, and commit.

    VerifyBoth features work in the browser and the phone preview, each with its own commit.

  5. Push it live

    Ask the agent to push. Your host picks up the change and redeploys.

    VerifyThe live site shows the specials, the badge and the filter.
Check your understanding
Q1. What makes the specials section “dynamic” in this project?
Q2. Why build the three features one at a time, with a commit after each?
· Tick off the 5 step(s) above.
· Work through the 1 remaining exercise 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.