⚡ Phase 2 — Build Things · Week 6

Landing Pages That Convert

⏱ ~4 hours 📚 4 lessons 🛠 VS Code · Netlify · GitHub · Claude AI

A landing page has one job: get someone to take one action. Learn the structure that works, write compelling copy with AI, and build a page for something real — maybe a WV business idea, a community event, or a service you want to offer.

Lesson 1 of 4

📐 The Anatomy of a Great Landing Page

A landing page has one job: get a visitor to take one specific action. Every section is designed to reduce doubt and increase desire. Here's the standard structure that converts.

🗺 The 7 sections of a high-converting landing page
🦸
Hero — Big headline, subheadline, primary CTA button. Make the value immediately clear.
🤔
Problem — Name the pain your visitor feels. Make them feel understood.
✨
Solution — How you/your product solves it. Benefits, not features.
⭐
Social Proof — Testimonials, logos, numbers. Builds trust.
🎁
Features/Pricing — What they get. Simple, scannable.
❓
FAQ — Answer the 5 objections that stop people from converting.
🎯
Final CTA — One more chance to act. Restate the key benefit.
Lesson 2 of 4

✍️ AI-Assisted Copywriting

Landing page copy is an art — short, punchy sentences that reduce friction. Claude is excellent at this when you give it the right inputs.

Write landing page copy for [your idea]. Target audience: [describe them]. The main thing they want: [outcome]. The main thing they fear: [concern]. Write: - 3 hero headline options (under 10 words each) - A 2-line subheadline - 3 benefit bullets (outcome-focused, not feature-focused) - 2 CTA button text options - 5 FAQ questions + answers Make it honest and conversational. No corporate buzzwords.

✍️
Benefits vs. features

Feature: "AI-powered meal planning." Benefit: "Stop staring at the fridge wondering what to cook." Write benefits — what the person gets, feels, or avoids. Claude will help you make this shift if you ask it to.

Lesson 3 of 4

🎨 Hero Sections, Buttons & CTAs

The hero is the most important real estate on the page. Let's look at the code patterns for building a compelling one, and understand why each choice matters.

landing.html
<section class="hero">
  <h1>Stop Forgetting to Water Your Plants</h1>
  <p>PlantPal sends you a nudge exactly when each plant needs water — no app required.</p>
  <a href="#signup" class="cta-btn">Get Early Access — Free</a>
  <p class="social-proof">Join 340 plant lovers on the waitlist</p>
</section>
Lesson 4 of 4

📊 Adding Basic Analytics

Once your page is live, you want to know: is anyone visiting? Where are they coming from? Are they clicking your CTA? Free tools give you this data in minutes.

1

Create a free Plausible or Google Analytics account

Plausible (plausible.io) is simpler and privacy-friendly. Google Analytics is more powerful. Either works — Plausible is better for beginners.

2

Copy the tracking script they give you

It's a single <script> tag. Paste it just before the </head> tag in your HTML. That's the whole installation.

3

Watch live visitors appear in the dashboard

Share your URL with a few people. Within minutes, you'll see them appear as live visitors. This is immediately addictive.

🏗 Week 6 Project

A Landing Page for Your Idea

Build This

A complete landing page for something you actually care about

It can be a real project, a fictional product, an event, a newsletter — anything. Use Claude for both the copy and the code. Deploy it to Netlify and add analytics.

  • All 7 sections from the anatomy lesson
  • A real CTA (email signup, waitlist form, or link)
  • Mobile responsive layout
  • Analytics tracking installed
  • Share the live URL and see who visits

Week 6 Done!

Mark it complete and keep your momentum going.

← Week 5Week 7 →