Beginner 10 min

The Art of Back and Forth

Nobody gets it perfect on the first try — and that's the point.

The best vibe coders aren't the ones who write the perfect description up front. They're the ones who know how to guide a conversation toward what they want. They look at the result, figure out what needs to change, and describe that next step clearly.

This lesson teaches you that skill. By the end, you'll stop trying to describe everything at once and start having productive, focused back-and-forth conversations with Claude.

Why Iteration Beats Perfection

When you're new to vibe coding, it's tempting to write a massive first message that tries to specify every detail — the font, the colors, the layout, the spacing, the animations, all at once. This feels like the responsible approach, but it's actually slower and less effective than describing the big picture and then refining.

Think of it like working with a talented interior designer. You wouldn't hand them a 40-page specification document before they've even seen the room. Instead, you'd say: "I want something warm and modern, with lots of natural light." They'd put together a first pass. Then you'd walk through it together and say "I love the couch, but the rug feels too busy" or "Can we try a darker wood for the shelves?"

The iterative approach
you: Build me a portfolio page with my name, a short bio, and a list of projects.
Claude: Done. I've created a clean portfolio with a header, bio section, and project cards.
// You open the browser, look at it, and decide what to improve
you: The project cards look a bit plain. Add a hover effect where they lift up slightly with a shadow.
Claude: Updated. The cards now rise 4px with a deeper shadow on hover.

Each round is focused on one thing. That focus is what makes it work. You're not trying to hold the entire design in your head — you're reacting to what's in front of you and steering it step by step.

Vague vs. Specific

The single biggest factor in getting useful results from Claude is specificity. Vague requests force Claude to guess what you mean. Specific requests give Claude a clear target. Here's the difference in action:

Too Vague
you: Make it look better
Claude doesn't know what "better" means to you — it guesses randomly, changing things you might have liked.
Specific & Clear
you: Add a gradient background going from navy to dark purple, increase the heading font size, and add some spacing between sections
Claude makes exactly those three changes — nothing more, nothing less.

You don't need to be technical. You just need to be concrete. Here are more examples:

Instead of... Try...
"Make it prettier" "Add rounded corners to the cards and a subtle shadow"
"Fix the layout" "Put the image on the left and the text on the right, side by side"
"Use better colors" "Switch to a warm palette — cream background, terracotta accents, dark brown text"
"Make it mobile-friendly" "When the screen is narrow, stack the two columns vertically"
"This doesn't look right" "The heading is too close to the paragraph below it — add more space between them"

Notice the pattern: every good request names what should change and how it should change. You don't need to know CSS or HTML — you just need to describe the visual result you're after.

A Real Iteration Session

Let's walk through what a real multi-step conversation looks like. We'll start with a portfolio page and improve it over five turns. Watch how each step builds on the last.

1

Start with the big picture. Describe the overall page and its sections. Don't worry about styling details yet.

Turn 1 — Initial build
you: Create a portfolio page for a photographer named Maya Chen. Include a navigation bar, a hero section with her name and tagline, an about section, a grid of project thumbnails, and a contact section at the bottom.
Claude: I've created Maya's portfolio with all five sections. The nav links scroll to each section, and the project grid shows 6 placeholder cards.
Created index.html
2

Fix the structure. After looking at the result, the sidebar navigation feels heavy. A horizontal bar would be cleaner.

Turn 2 — Layout change
you: Move the navigation to a horizontal bar at the top instead of a sidebar. Keep it sticky so it stays visible when scrolling.
Claude: Updated. The nav is now a horizontal bar fixed to the top with links spaced evenly across.
3

Add polish. The layout is right, but the project cards feel static. Time to add some life.

Turn 3 — Visual refinement
you: The project cards look flat. Add a hover effect where they lift up slightly with a shadow, and make the thumbnail image zoom in a little on hover too.
Claude: Done. Cards now translateY(-6px) with a deeper shadow on hover, and the thumbnails scale to 1.05 with overflow hidden so they don't break the card border.
4

Add a new feature. The page is looking good. Now add something that wasn't in the original plan.

Turn 4 — New feature
you: Add a dark mode toggle button in the top right corner of the navigation bar. Use a moon icon for dark mode and a sun icon for light mode.
Claude: Added. There's now a toggle button in the nav that switches between light and dark themes. The preference is saved to localStorage so it persists between visits.
5

Fine-tune the details. The feature works, but the colors need adjustment. Be specific about what's wrong.

Turn 5 — Fine-tuning
you: The colors in dark mode are too harsh. Use softer grays instead of pure black — something like #1a1a2e for the background and #e0e0e0 for the text. And make the card backgrounds a slightly lighter shade than the page background.
Claude: Softened the dark mode palette. Background is now #1a1a2e, text is #e0e0e0, and cards use #242440 for subtle contrast against the page.

Five turns. Each one took a few seconds to write. And the result is a polished, feature-rich portfolio that would have been incredibly hard to describe in a single message.

Pro Tip

When something looks wrong but you can't articulate why, try describing what you do want instead. "The spacing feels cramped — add more breathing room between sections" is far more useful than "this doesn't look right." Focus on the outcome, not the problem.

Saving Your Progress with Git

As you iterate, you'll want to save snapshots of your work. That way, if you make a change you don't like, you can go back to a previous version. This is what git does — it's like a save button for your entire project folder.

You don't need to master git right now. These three commands are all you need to start:

Terminal
// Run this once when you start a new project
$ git init
// Stage all your files (tells git what to save)
$ git add .
// Save a snapshot with a short description
$ git commit -m "Initial portfolio page"
[main (root-commit) a3f7c2d] Initial portfolio page
1 file changed, 84 insertions(+)

After each round of meaningful changes, run git add . and git commit -m "description of what changed" again. Each commit is a checkpoint you can return to. Think of it like saving your game before a boss fight — if things go sideways, you have a safe point to return to.

After your next round of changes
$ git add .
$ git commit -m "Add dark mode toggle and soften color palette"
[main 7e2b1f4] Add dark mode toggle and soften color palette
1 file changed, 42 insertions(+), 8 deletions(-)

That's it. Two commands per save. You'll learn more about git later in the course, but this is enough to protect your work right now.

Try This

Take the bio page you built in Lesson 2 and iterate on it. Open Claude Code and ask it to:

  1. Change the color scheme to something completely different
  2. Add a new section (like a list of hobbies, a favorite quote, or a skills grid)
  3. Improve the layout by rearranging where sections appear on the page

Practice being specific about what you want changed. After each change, commit your progress with git.

Check Your Understanding

1. Which request will get better results?

A "Make the page look better"
B "Add a subtle shadow to the cards and increase the spacing between sections"
C "Fix everything that's wrong with the design"

2. The result doesn't look right. What's the best first move?

A Say "this doesn't look right" and let Claude figure it out
B Describe specifically what you want changed about the result
C Start over from scratch with a completely new description

3. What does git commit do?

A Saves a snapshot of your project that you can go back to
B Uploads your project to the internet
C Deletes your previous version and replaces it with the current one

4. What's the best approach to building something complex?

A Write one extremely detailed message that covers every aspect of the design
B Copy and paste code from other websites and ask Claude to modify it
C Start with the big picture, review the result, and iterate one step at a time

Key Takeaways

Lesson 2: Your First Web Page Course Home Lesson 4: Multi-Page Sites