Chapter 3: Creative Challenges — Progressive Exercises

30 Minutes to Master the Vibe Coding Workflow

These exercises build on the hands-on session. They progress from straightforward to ambitious, each one practising a different aspect of conversational creation. Complete them in order, and tackle the stretch challenges if you finish early.

Exercise 1: The One-Prompt Landing Page (5 minutes)

Objective

Test how much you can achieve with a single, well-crafted prompt.

The Challenge

Write one prompt — and only one — that produces a complete, usable landing page. No follow-up refinements allowed.

Setup

# In Claude Code:
mkdir landing-page && cd landing-page
claude

Or open a new chat in your preferred tool.

Your Prompt

Craft a single prompt that covers all of these: purpose, layout, colours, typography, content, and responsiveness. Here's an example to study (don't copy it — write your own):

Create a landing page for a Lake District dog walking service called 
"Fell Paws". It should have:

- A full-screen hero section with a warm photograph-style background 
  (use a placeholder gradient in earthy greens and browns), a large 
  white heading "Adventures for Every Paw", and a subtitle 
  "Professional dog walking in the heart of the Lake District"
- A "Services" section with 3 cards side by side: "Group Walks £15", 
  "Solo Adventures £25", "Puppy Socialisation £20" — each with a 
  short description and a "Book Now" button
- A testimonial section with a quote from "Sarah, Keswick" saying 
  she trusts them completely with her border collie
- A simple footer with phone number, email, and "© 2026 Fell Paws"

Style: warm, friendly, outdoorsy. Use rounded corners, soft shadows, 
and a colour palette of forest green (#2D5016), warm cream (#FFF8E7), 
and bark brown (#5C4033). Sans-serif font. Mobile-responsive — cards 
should stack vertically on small screens. Single HTML file with 
embedded CSS, no frameworks.

Evaluate Your Result

Open the generated file in your browser and score yourself:

Criterion	Yes / Partly / No
All sections present?
Colours match your description?
Looks good on desktop?
Looks good on mobile (resize the window)?
Would you show this to someone?

Key Learning

A detailed, specific prompt produces dramatically better first drafts than a vague one. The time you invest in describing is time saved in iterating.

Exercise 2: The Refinement Sprint (7 minutes)

Objective

Practise the iterative refinement loop under time pressure.

Setup

Use the landing page from Exercise 1 (or generate a fresh one quickly).

The Challenge

You have exactly 5 rounds of refinement. Each round, send one message to your AI tool. Make each message count.

Round 1 — Layout Fix

Look at your page and describe the single biggest layout issue:

The services cards are too close together — add more spacing between 
them and give each card a subtle border.

Round 2 — Visual Polish

Improve the aesthetics:

The hero section feels flat. Add a semi-transparent dark overlay on 
the background so the white text is easier to read. Also make the 
heading larger — it should dominate the section.

Round 3 — Interactivity

Add one interactive element:

When hovering over a service card, lift it slightly and deepen the 
shadow — like picking a card up off the table. Add a smooth transition.

Round 4 — Mobile Fix

Resize your browser to phone width and fix what breaks:

On mobile, the hero heading is too large — scale it down. The cards 
should have full width with a small gap between them. The testimonial 
text should be centred.

Round 5 — Final Polish

One last touch to make it shine:

Add a smooth fade-in animation to each section as the user scrolls 
down the page. Each section should appear half a second after the 
previous one enters view.

Reflection

• Which round had the most visible impact?
• Did the AI ever misunderstand you? How did you adjust?
• What would your sixth round have been?

Exercise 3: The Reference Mashup (8 minutes)

Objective

Practise using real-world references to guide AI output.

The Challenge

Combine elements from three different websites into one original creation. Choose a topic (restaurant, gym, bookshop, photography studio) and describe it using references.

Example Prompt

Create a landing page for an independent bookshop called "The Binding".

Design references:
- Layout like Stripe.com — clean, generous white space, content 
  centred in a narrow column
- Typography like Medium.com — large, elegant serif headings with 
  clean sans-serif body text
- Colour mood like a warm library — deep navy (#1B2A4A), antique 
  gold (#C9A84C), parchment cream (#F5F0E1), and charcoal text

Sections:
1. Hero with the shop name in large serif type and a tagline: 
   "Where every shelf holds a surprise"
2. "This Week's Picks" — 4 book cards in a grid, each with a 
   coloured placeholder square, title, author, and a one-line review
3. "Events" — upcoming author readings and book club meetings in 
   a simple list format with dates
4. "Visit Us" — address, opening hours, and a placeholder for 
   a map
5. Footer with social media links and newsletter signup field

Single HTML file, responsive, no frameworks.

After Generation

Iterate with 2-3 rounds to perfect the mashup:

The typography doesn't feel serif enough — use Georgia or a 
similar serif for headings. Also, the book cards need more 
padding inside and a subtle cream background to distinguish 
them from the page.

Key Learning

References give AI concrete visual anchors. "Like Stripe's layout" communicates more effectively than describing every spacing decision.

Exercise 4: Data Visualisation Without Libraries (8 minutes)

Objective

Build a data-driven dashboard using only HTML and CSS — no chart libraries, no JavaScript frameworks.

The Challenge

Create a simple analytics dashboard that displays meaningful data visually.

Prompt

Create a web dashboard page titled "Community Garden 2026 Season".

Include these sections:

1. Summary bar at the top with 4 metric cards side by side:
   - "Plots Active: 42/50" with a green accent
   - "Harvest This Month: 287 kg" with an orange accent
   - "Volunteer Hours: 156" with a blue accent
   - "New Members: 8" with a purple accent

2. A horizontal bar chart showing harvest by vegetable type, 
   built with pure CSS (coloured div bars, no chart library):
   - Tomatoes: 84 kg (longest bar)
   - Courgettes: 62 kg
   - Beans: 48 kg
   - Lettuce: 35 kg
   - Herbs: 28 kg
   - Carrots: 30 kg
   Each bar should have the label on the left and the value 
   on the right.

3. A "Plot Status" section with a simple grid of 50 small 
   squares — 42 coloured green (active), 5 amber (available), 
   3 red (maintenance). Include a colour legend.

4. A "Recent Activity" list showing 5 entries like:
   "Jun 15 — Plot 12 harvested 8kg tomatoes"
   "Jun 14 — 3 new volunteer sign-ups"

Style: clean dashboard aesthetic, white background, light grey 
card backgrounds, clear sans-serif font, subtle shadows on 
cards. Responsive — metric cards should wrap on mobile.
Single HTML file with embedded CSS, no JavaScript needed.

Stretch: Add Interactivity

If you finish early, add JavaScript through conversation:

When I hover over a bar in the bar chart, show a tooltip with 
the exact percentage of total harvest that vegetable represents. 
Also, make the plot status squares show a tooltip with the plot 
number when hovered.

Key Learning

AI can generate surprisingly effective data visualisations using pure CSS. You don't need D3.js or Chart.js for straightforward dashboards.

Exercise 5: The Deployment Race (7 minutes)

Objective

Take a creation live on the internet using GitHub Pages.

The Challenge

Deploy one of your pages from the previous exercises to a live URL. Speed matters — see how quickly you can go from local file to live site.

Steps

Step 1 — Prepare your file (1 minute): Ensure your best HTML file is named index.html in its own folder.

Step 2 — Create a GitHub repository (2 minutes):

Using Claude Code:

Create a new GitHub repository called "my-vibe-site" and push 
this index.html file to it. Then enable GitHub Pages to serve 
from the main branch.

Or manually:

1. Go to github.com/new
2. Name it my-vibe-site, set to Public, tick "Add a README"
3. Click Create Repository
4. Upload your index.html via the "Add file" button

Step 3 — Enable GitHub Pages (1 minute):

1. Go to Settings → Pages
2. Source: "Deploy from a branch"
3. Branch: main, folder: / (root)
4. Click Save

Step 4 — Wait and visit (2 minutes): Your site will be live at:

https://YOUR-USERNAME.github.io/my-vibe-site/

It may take 1-2 minutes for the first deployment.

Step 5 — Share (1 minute): Send the URL to a friend, colleague, or the workshop chat. You just deployed a website.

Success Criteria

• Page is accessible at a public URL
• It loads correctly on someone else's device
• You understand how to update it (push new code, wait for deploy)

Stretch Challenges

For Fast Finishers

Challenge A: The 3-Page Site

Expand your single page into a 3-page site: Home, About, and 
Contact. Add a navigation bar that links between them. Each page 
should share the same header and footer styling.

Challenge B: The Animated Hero

Create a hero section with a gradient background that slowly shifts 
between three colours on an infinite loop. Add floating translucent 
circles that drift upward like bubbles, purely with CSS animations. 
The heading should type itself out letter by letter.

Challenge C: The Interactive Quiz

Create a "What Type of Learner Are You?" quiz with 5 multiple-choice 
questions. After answering all questions, show a result based on the 
most-selected category: Visual, Auditory, Reading, or Kinaesthetic. 
Include a "Retake" button. No page reloads — everything happens on 
one page with JavaScript.

Challenge D: Dark Mode Portfolio

Build a developer-style portfolio with a terminal/hacker aesthetic: 
dark background, green monospace text, blinking cursor effects. 
Include a working command-line interface where typing "help" shows 
available commands, "about" shows a bio, "projects" lists work, 
and "contact" shows email. Make it feel like you're SSHing into 
someone's personal server.

Exercise Reflection

After completing the exercises, assess yourself:

Prompt Quality

• I can write a detailed first prompt that produces 80%+ of what I want
• I use specific colour codes, layout descriptions, and content
• I reference real websites for visual inspiration
• I specify responsive behaviour in my prompts

Iteration Skill

• I describe changes in terms of what I see, not code
• Each refinement round produces a visible improvement
• I know when to make small changes vs. start fresh
• I can identify and articulate what's wrong with a design

Deployment Confidence

• I can get a page from my computer to a live URL
• I understand the GitHub Pages workflow
• I can update a deployed site
• I could deploy a new project on my own

Common Patterns You've Practised

The Vision Prompt

Detailed description → Specific colours/layout/content → Responsive 
requirements → Single first-draft message

The Refinement Sprint

Review → Identify one issue → Describe the fix naturally → Review 
again → Repeat

The Reference Technique

"Layout like X, colours like Y, typography like Z" → Original 
creation informed by proven designs

The Deployment Pipeline

Local file → GitHub repository → Enable Pages → Live URL → Share

What's Next?

You've practised the core vibe coding patterns through structured exercises. In the next chapter, you'll apply everything to a capstone project of your own choosing — building and deploying something that matters to you.

---

Next: Chapter 4: Capstone Project — Your Live Creation

Back to Hands-On | Back to Phase Overview