Day 5 of 28 · Vibe Coding Challenge
Your First Vibe-Coded Project
⏱ 7 min
📊 Beginner
Today you build something real. Not a tutorial exercise. Not a "Hello World." A real project you can show someone.
You'll describe an idea to an AI tool, watch it build the project, and iterate until it's exactly what you want.
Pick your project
Choose one of these — or come up with your own:
Personal portfolio — A page about you with your bio, projects, and contact info
Recipe keeper — A simple app to save and search your favorite recipes
Countdown timer — A beautiful countdown to an event that matters to you (birthday, vacation, product launch)
Link-in-bio page — A page with all your important links, like Linktree but yours
Pick the one that excites you most. You'll care more about getting it right.
Knowledge Check
Why is it better to pick a project you actually care about?
A
Personal projects are technically simpler
B
The AI generates better code for personal projects
C
The AI needs emotional context to work properly
D
You'll be more motivated to iterate and refine it, which is how you learn
Vibe coding is iterative — you describe, review, refine, repeat. When you care about the result, you'll push for the details that make it great. That iteration process is where the real learning happens.
The build process
Here's the process you'll follow. This is the core vibe coding loop — you'll use it for everything you build:
Step 1: Describe. Tell the AI what you want. Be specific about features, design, and behavior.
Step 2: Review. Look at what it built. Does it match your vision? What's missing? What's wrong?
Step 3: Refine. Ask for changes. "Make the header bigger." "Add a dark mode toggle." "Change the color scheme to warm tones."
Step 4: Repeat. Keep refining until it's right. Each iteration gets closer to your vision.
Build a personal portfolio website. I want a dark theme with a hero section showing my name "Alex Chen" and the title "Product Designer." Include an about section, a grid of 4 project cards with placeholder images, and a contact form at the bottom.
Building your portfolio...
Done ✓ Here's what I created:
🌙 **Dark theme** — charcoal background with white text
👤 **Hero section** — "Alex Chen" in large type, "Product Designer" below
📝 **About section** — placeholder bio text
🖼️ **Project grid** — 4 cards with placeholder images, titles, and descriptions
📬 **Contact form** — name, email, message fields with submit button
Preview is live. Take a look and tell me what to change.
↻ Replay conversation
The first prompt gives you structure. Not bad — but not done.
I like the layout but the design feels flat. Can you add gradient accents, subtle animations on scroll, and make the project cards have a hover effect that lifts them up?
Updated ✓
✨ Added gradient accents (purple → blue) on headings and buttons
🎬 Scroll animations — sections fade in as you scroll down
📦 Project cards now lift up with a shadow on hover
🌈 Subtle gradient border on the contact form
Much more dynamic now. What do you think?
Perfect. One more thing — add a sticky navigation bar at the top with smooth scrolling to each section.
Done ✓
📌 Sticky nav bar with transparent background (becomes solid on scroll)
🔗 Links: About, Projects, Contact
🎯 Smooth scroll to each section when clicked
Your portfolio is ready to deploy. Want me to set that up?
↻ Replay conversation
After 3 iterations. Same project, completely transformed.
Knowledge Check
How many prompts did it take to get the portfolio to a good state?
A
Three — the initial build plus two rounds of refinement
B
One — the AI got it perfect on the first try
C
Ten — it took many attempts to get anything right
D
Zero — it was all automatic
Three prompts and the portfolio went from "basic layout" to "polished, animated, professional." That's typical. The first prompt gets the structure, then you iterate on design and behavior. Each round takes seconds.
Common first-project mistakes
Being too vague. "Build me a website" gives you a generic template. "Build me a portfolio with a dark theme, gradient accents, and animated project cards" gives you something you'll actually use.
Not iterating. The first version is never the final version. That's fine. The magic is in the iteration — each change teaches you what's possible and how to communicate with AI.
Trying to get everything in one prompt. Start with the structure and layout, then refine. Trying to describe every detail upfront leads to overloaded prompts that confuse the AI.
Make a website with a dark theme and a nav bar and hero section with my name and title and then an about section with my photo and bio text and a skills section with progress bars and a portfolio grid with filterable categories and a testimonials carousel and a blog section with latest posts and a contact form with validation and a footer with social links and also make it responsive and add animations and SEO meta tags and a sitemap.
That's a lot to tackle at once! Let me start with the core structure:
1. Dark theme + nav bar + hero section
2. About section with photo and bio
3. Contact form + footer
I'll build these first, then we can add the other sections one by one. This way you can review each piece as we go.
Sound good?
↻ Replay conversation
Knowledge Check
What's wrong with putting everything in one giant prompt?
A
Nothing — longer prompts are always better
B
The AI can't handle long text
C
It's too many requirements at once — better to start with the core and iterate
D
Long prompts cost more money
Even the best AI can lose focus with too many requirements in one prompt. Start with the structure and core features, then layer on complexity. It's faster and gives you better results because you can course-correct at each step.
Your turn
Here's your assignment:
1. Open Bolt (or Cursor if you prefer)
2. Pick one of the project ideas from above (or your own)
3. Write a specific, detailed first prompt
4. Build the project through 3–5 rounds of iteration
5. Keep going until you're happy with the result
Don't aim for perfection. Aim for something you'd actually show to a friend.
Final Check
What's the core vibe coding loop?
A
Research → prototype → test → launch
B
Describe → review → refine → repeat
C
Read documentation → plan → implement → review
D
Write code → test → debug → deploy
Describe what you want, review what the AI builds, refine with specific feedback, and repeat until it's right. This loop is the foundation of everything you'll do in this challenge. Master it, and you can build anything.
🎨
Day 5 Complete
"You just built a real project without writing a single line of code. This is how you build things now."
Tomorrow — Day 6
The Art of Prompting
Good prompts produce great code. You'll learn the framework that turns vague ideas into precise, effective prompts.