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

Add an archive

Keep every week of specials in one data file and build an archive page from it: newest first, grouped by month, with a link for each week and a search box.

A week after launch, the owner asks: “Can people still see last week's specials? Customers keep asking about the fig tart.” That's an archive: past content, kept and findable. The tempting shortcut is to copy each old week into a page of its own. Don't. Keep every week in one data file and let the page build the archive from it, so there's one source of truth and adding a week is one edit.

One list of weeks

Change the data file from “this week” to “every week”: a list of weeks, each with its date and its items. The homepage shows the newest week; the archive page shows them all. Because both pages read the same file, they can never disagree.

specials.json, now a list of weeks
{
  "weeks": [
    { "week": "2026-11-09", "items": [ { "name": "Cardamom buns", "price": 4.5, "tags": ["vegetarian"] } ] },
    { "week": "2026-11-02", "items": [ { "name": "Fig tart", "price": 6.5, "tags": ["vegetarian"] } ] }
  ]
}

Write dates as year-month-day, such as 2026-11-09. That format sorts correctly as plain text and means the same date in every country, whereas “11/09” is November 9 in the US and 11 September almost everywhere else. One catch: JavaScript treats a bare date like 2026-11-09 as midnight UTC, so for visitors in the Americas it can display as the day before. The prompt below asks the agent to avoid that, and you'll check it.

Quick checkExercise 1 of 2

Why store dates as 2026-11-09 rather than 11/09/2026?

What a good archive page does

  • Newest first, grouped under month headings such as “November 2026”.
  • A link for every week, such as archive.html#2026-11-02, so the owner can share last week's specials.
  • Search by item name: “fig” finds every week that had a fig tart.
  • A way back: the homepage links to the archive, and the archive links home.

That search box is the first place a visitor can type something into your site. Anything a visitor types is input you have to handle safely, and the next two lessons come back to it.

Match them upExercise 2 of 2

Match each archive decision to the reason it matters.

Pick one on the left, then its partner on the right.

Decision
Why it matters
0 of 4 matched
When the archive grows
A year of weeks is about 52 entries, which one page handles easily. If it ever grows into hundreds, ask the agent about pagination, showing ten weeks at a time. Don't build that until you need it.
Definition of done0 / 5
Pick your track · finish either one
Steps · 0 / 5 done

  1. Plan the change

    Start the agent in your project folder, in plan mode if your agent has one, and send the prompt.

    prompt
    The owner wants an archive of past specials. Change specials.json from one week to a list of weeks, newest first, each with its date as YYYY-MM-DD and its items.

- The homepage shows only the newest week, exactly as it looks now.
- Add an archive.html page that lists every week, newest first, grouped under month headings such as "November 2026".
- Give each week its own link, such as archive.html#2026-11-02.
- Add a search box that finds items by name across all weeks.
- Link the homepage and the archive to each other.
- Display dates exactly as written in the data, with no time-zone shift.

Plain JavaScript, no new packages, keep the current design. Add two past weeks of sample specials so I can test. Show me the plan first.
    VerifyThe plan keeps one data file, adds one new page, and adds no packages.

  2. Build it, then check the homepage first

    Approve and let it build. Start your local preview server and open the homepage before anything else: it should look exactly as it did.

    VerifyThe homepage still shows only this week's specials.

  3. Check the archive

    Open the archive and check the order and the month headings. Click a week's link, then paste that link into a new tab.

    VerifyThe weeks are newest first, under the right months, and each link opens the archive at that week.

  4. Check the dates

    Compare every date on the page with the data file. A date one day early means the code read it as midnight UTC; report it with the example you found.

    VerifyEvery date on the page matches the data file.

  5. Test the search, then commit and push

    Search for an item from a past week, for a word that matches nothing, and with an empty box. When all three behave sensibly, commit and push.

    VerifyThe live site has a working archive with search.
Check your understanding
Q1. The owner wants last week's specials kept online. What's the best way to store them?
Q2. A week dated 2026-11-09 shows as November 8 on the archive page for visitors in New York. What's going on?
· 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.

Plain-English definitions from the AI Coding Dictionary.