โ† All Courses
Gina's Course ยท Lesson 3 of 9
๐ŸŒธ Phase 2 โ€” Build Your First Page

Today We Build
Your First Web Page

Step by step, we'll create a beautiful personal page with Claude โ€” no technical knowledge required. You're going to love this. ๐ŸŒธ

Your Progress
Lesson 3 of 9

You Know More Than You Think

"The most important thing about building your first web page isn't getting it perfect โ€” it's proving to yourself that you can do it at all."

You've learned what vibe coding is and you've met your AI tools. Today we put it all together. Using Claude, you'll create a real web page โ€” your personal page or a simple page for your business idea.

This page will have your name, your story, what you offer, and a way for people to reach you. That's everything you need to start showing up online professionally. And Claude will write every line of code. Your only job is to describe what you want.

Here's Exactly What to Do

1
Open Claude

Go to claude.ai and log in to your free account. You'll see a clean chat box โ€” just like sending a message.

2
Use the prompt builder below

Fill in your details in the form below and I'll write you a perfect, detailed prompt to paste into Claude.

3
Watch Claude build your page

Within seconds, Claude will generate your full web page. On the right side of Claude's screen, you'll see a preview of how it actually looks!

4
Ask Claude to improve it

Don't love the colors? Want a different layout? Just tell Claude โ€” "can you make the background softer?" or "add a warm welcome message at the top." Keep refining until it feels like you.

5
Save your creation

When you're happy, copy the code that Claude produced. In a later lesson, we'll publish it live on the internet so others can see it!

๐ŸŒธ Your Personal Prompt Builder

Fill in your details below โ€” be as honest and specific as you like. This becomes the prompt you'll paste into Claude:

Follow-Up Prompts That Work Beautifully

Once Claude builds your first version, here are some natural, easy follow-up messages you can send to make it more "you":

"Can you make the tone warmer and more personal โ€” it should sound like I'm talking directly to someone I care about"
"Change the background to a very light, soft cream or blush color"
"Add a short section about my background and why I'm passionate about this work"
"Make the call-to-action button say 'Let's Talk' and make it more prominent"
"Add a section with 3 things people say about working with me (placeholder testimonials are fine)"

๐ŸŒธ How Did It Go?

Come back after your Claude session. What did your page look like? What did you change? How did it feel to see something you created actually appear on screen?

What You Built Today

๐ŸŒYou built a real web page using Claude โ€” no coding, no developers, no expensive tools.
๐Ÿ”„Iterating with follow-up prompts is how you go from good to great. The first version is just the start.
๐Ÿ’ฐWeb designers charge $500โ€“$2,000+ for pages like this. You just made one for free.
๐Ÿš€In Lesson 4, we turn your expertise into a product โ€” something people will actually pay you for.
๐ŸŒธ
Grace โ€” Your AI Mentor ๐ŸŒธ
Powered by Claude ยท Responds just for you

How did it go? What did your page look like? How did it feel?