Activity · Lesson 3.3

Workspace Test Drive

Let's make sure your vibe coding workspace is set up and working. You'll verify your setup, build a tiny test project, and confirm the full workflow.

What You'll Do
This activity has three parts: verify your workspace is ready, build a small greeting page using vibe coding, and confirm you can see your live preview. By the end, you'll know your setup works and you're ready to start building your real project.
Before you start: Make sure you have your vibe coding workspace open (Replit, Bolt.new, or VS Code + an AI assistant) in another tab or window.
Step 1 of 3 — Workspace Setup Check

Is Your Workspace Ready?

Go through each item below. Click each one after you've confirmed it in your workspace.

  • I have my vibe coding workspace open (Replit, Bolt.new, or VS Code)
  • I can see where to type or enter a prompt / description of what I want to build
  • I can see where the live preview / output will appear
  • If using Replit: I created a new project (HTML/CSS/JS template). If using Bolt: I'm on the main page ready to describe a project.
Stuck? If you can't find the prompt area or preview, check Lesson 3.3 for screenshots and setup instructions for your specific tool.
Step 2 of 3 — Your First Vibe Code

Build a Greeting Page

Time to test the full vibe coding workflow. Copy the prompt below, paste it into your AI coding tool, and see what it builds for you.

Your Test Prompt

Create a simple personal greeting page. It should have a dark background (#1a1a2e), centered content, and include: my name "[YOUR NAME]" in a large, bold heading, a subtitle that says "Future AI Builder", a short paragraph about one thing I'm excited to build in this course, and a small footer that says "Built with AI - [today's date]". Make it look clean and modern with good spacing.

Important: Before you paste, replace [YOUR NAME] with your actual name and [today's date] with today's date. Then customize the paragraph about what you're excited to build — make it personal!
After AI builds it, check these:
  • I can see a live preview of the page AI created
  • My name appears on the page
  • The page has a dark background and looks styled (not just plain text)
  • The content is centered and readable
Step 3 of 3 — Make a Change

Now Iterate

The core of vibe coding is the loop: describe → build → test → refine. You've done describe, build, and test. Now let's practice the refine step.

Pick one change to make
Go back to your AI tool and ask it to change ONE thing about your greeting page. Here are some ideas — or come up with your own:
  • 1
    "Change the accent color to [your favorite color]"
  • 2
    "Add a fun emoji next to my name"
  • 3
    "Add a subtle animation — make the heading fade in when the page loads"
  • 4
    "Make the font bigger and add more spacing between sections"
What did you change?
Briefly describe the change you asked for and whether it worked:
Final confirmation
  • I successfully made a change to my greeting page using the vibe coding workflow
  • I understand the loop: describe what I want → AI builds it → I check the result → I ask for changes
🎉

Workspace Ready!

You've verified your setup, built something with AI, and practiced iterating. You're ready to start your real project.

10/10
Checklist items completed
What you just proved:
Your workspace works. You have a place to describe what you want and see the results live.

Vibe coding works. You described a page in plain English and AI built it for you — styled, structured, and functional.

You can iterate. When something needs changing, you describe the change and AI updates it. That's the entire build process you'll use for your project.
Keep your greeting page! It's your first vibe-coded creation. You can delete it later, but for now it's proof that you know the workflow.