Chapter 2: Hands-On - Building Your First Vibe Creation
⏱️ Estimated time: 90 minutes 🎯 Difficulty: Beginner-friendly (no coding experience required) 💡 What you'll achieve: A working web page built entirely through conversation with AI
What We Are Building
In this session you will create a personal portfolio page using nothing but natural language. You will describe what you want, refine it through conversation, and end up with a polished, mobile-friendly result — without writing a single line of code by hand.
Choosing Your Tool
Pick one of the following approaches. We recommend Option A if you completed the Phase 2 API setup.
Option A: Claude Code (Recommended)
Claude Code is the most natural fit for vibe coding. You describe what you want, and it creates files, runs a preview server, and iterates based on your feedback.
# Create a project folder and launch Claude Code
mkdir my-portfolio && cd my-portfolio
claude
Option B: Cursor AI or Windsurf
Open your project folder in Cursor or Windsurf and use the built-in chat panel. The workflow is the same — describe, review, refine.
Option C: ChatGPT / Claude.ai (Copy-Paste)
If you prefer a browser-based approach, use ChatGPT (canvas mode) or Claude.ai (artifacts). You will need to copy the generated code into files manually, but the creative process is identical.
Exercise 1: The Big Picture (15 minutes)
Step 1 — Set the Vision
Start your session with a clear, descriptive prompt. Here is an example:
Create a single-page personal portfolio website for a freelance
photographer called Alex Chen. It should have:
- A hero section with a large heading and a short tagline
- A gallery section showing 6 placeholder images in a grid
- An "About Me" section with a short bio
- A contact section with email and social media links
- A footer with copyright
Style: clean, minimal, lots of white space, modern sans-serif font.
Colour palette: white background, charcoal text, accent colour of
warm coral (#FF6B6B).
Make it responsive so it looks good on phones too.
Use a single HTML file with embedded CSS — no frameworks needed.
Step 2 — Review the Result
Open the generated HTML file in your browser (or ask Claude Code to serve it). Look at it on both desktop and mobile widths.
Step 3 — Note What to Change
Write down 2-3 things you want to adjust. For example:
- "The gallery images are too small on desktop"
- "I want the hero section to take up the full screen height"
- "The font feels too heavy"
Exercise 2: Iterative Refinement (20 minutes)
Round 1 — Layout Adjustments
Take your notes from Step 3 and describe the changes conversationally:
Make the hero section full-height (it should fill the whole screen).
Centre the heading vertically. Make the gallery images larger on
desktop — three per row with some spacing between them.
Round 2 — Visual Polish
Add a subtle shadow to the gallery images on hover.
Make the navigation links at the top stick to the top of
the page when scrolling. Add smooth scrolling when clicking
navigation links.
Round 3 — Content Refinement
Change the "About Me" text to something more personal and engaging.
Add a subtle background colour to the about section — very light
grey — to visually separate it from the gallery.
The Key Principle
Each round should be small and focused. Describe one or two changes at a time, review the result, then continue. This iterative loop is the heart of vibe coding.
Exercise 3: Adding Interactivity (20 minutes)
A Simple Image Lightbox
When someone clicks a gallery image, show it larger in a dark
overlay that covers the whole page. Clicking the overlay or
pressing Escape should close it. Add a smooth fade-in animation.
A Contact Form
Replace the contact links section with an actual contact form.
Fields: name, email, message. Style it to match the rest of
the page. Add basic validation — all fields required, email
must look like an email address. When submitted, show a
"Thank you" message instead of the form.
Dark Mode Toggle
Add a small moon/sun icon in the top-right corner. When clicked,
switch the entire page to dark mode (dark background, light text,
adjusted colours). Remember the user's preference.
Exercise 4: Mobile-First Thinking (15 minutes)
Test your page at different screen widths. Describe any issues naturally:
On phone screens:
- The gallery should show one image per row, not three
- The navigation links are too close together — add more spacing
or collapse them into a hamburger menu
- The hero heading is too large for small screens — scale it down
Exercise 5: Going Further (20 minutes)
Choose one of these challenges based on your interest:
Challenge A: Animated Hero
Add a subtle animation to the hero section. The heading should
fade in and slide up slightly when the page loads. The tagline
should appear half a second later with the same animation.
Challenge B: Testimonials Carousel
Add a testimonials section between the gallery and contact form.
Show one testimonial at a time with the person's name and a short
quote. Include left/right arrows to cycle through three testimonials.
Auto-advance every 5 seconds.
Challenge C: Performance Dashboard
Create a completely different page — a simple analytics dashboard
with some fake data. Show:
- A large number showing "Total Visitors: 12,847"
- Three smaller cards: "This Week: 342", "Bounce Rate: 34%",
"Avg Time: 2m 15s"
- A simple bar chart showing visitors per day for the last 7 days
Use CSS only — no chart libraries needed.
Tips for Better Vibe Coding
Be Specific About What You See
Instead of "this looks wrong", try:
- "The gap between the heading and the paragraph is too large"
- "The button text is hard to read against the coral background"
- "The gallery looks uneven — the third row only has two images"
Use Comparisons
- "Make the heading similar in size to the one on apple.com"
- "I want the card hover effect to feel like Airbnb's listing cards"
- "The spacing should feel more like a magazine layout"
Describe the Feeling
- "This feels too cramped — add more breathing room"
- "The page feels static — add some subtle movement"
- "The colours feel too harsh — soften them"
Save Versions
If you are using Claude Code, your changes are saved automatically in the files. If using a chat interface, copy your code after each major milestone so you can go back if needed.
What You Have Achieved
By the end of this session, you have:
- Built a complete, responsive web page through conversation alone
- Practised the iterative refinement loop (describe, review, refine)
- Added interactivity without understanding JavaScript
- Adapted a design for mobile screens using plain English
- Experienced how AI coding agents translate intent into working code
The same approach works for any project — a business landing page, an internal tool, a prototype for a client pitch, or a personal project. The only limit is how clearly you can describe what you want.