Exercise 04: Pair Programming with an Agent — The Agentic Crew Hands-On Guide

Overview

Now you're going to build something from scratch — a complete web application — by describing what you want to an AI coding agent. You won't write the code yourself. You'll describe what you want, review what the agent builds, and iterate until it's right.

This is pair programming with an AI: you bring the vision, the agent brings the implementation. You'll build a complete Travel Bucket List web app with CRUD operations and localStorage persistence.

Go off-script. These prompts are suggestions, not assignments. If you want a dark mode toggle, a map view, or a 'random destination' button — ask for it. The agent will figure out how to build it. The point is to practise the back-and-forth: describe, review, refine.
— from the exercise

What you'll build

By the end of this exercise

✓ A Travel Bucket List web app (single HTML file)

✓ Add destinations with name, reason, and priority

✓ Visual cards in a responsive grid layout

✓ Edit, delete, and mark-as-visited functionality

✓ Data persistence across page refreshes via localStorage

Key concepts

Terms you'll learn

Term What it means

CRUD Create, Read, Update, Delete — the four basic data operations

HTML The structure — what elements exist on the page

CSS The style — how those elements look (colours, layout, fonts)

JavaScript The behaviour — what happens when you interact (click, submit)

localStorage Browser storage that persists between visits — no server needed

DOM The live representation of the page that JavaScript can change

Event listener Code that runs when something happens (click, submit, keypress)

What's covered

Sections in this exercise

01 What You'll Build

02 What You'll Need

03 Create the Project

04 Describe the App

05 Review What the Agent Built

06 Open It in Your Browser

07 The CRUD Cycle

08 Iterate and Improve

09 When Something Goes Wrong

10 Understand What Was Built

11 Commit and Push

What just happened

You built a complete web application without writing a single line of code yourself. You described what you wanted, reviewed what the agent produced, and iterated until it was right. This is the core loop: describe, review, iterate, understand.