Your First Prompt: Building the Homepage

This is where it gets fun. You're about to go from a blank folder to a full website in about five minutes.

Create Your Project Folder

Open your terminal. Navigate to wherever you want to keep your project. I like using the Desktop because it's easy to find, but anywhere works.

mkdir my-website && cd my-website

That creates a folder called my-website and moves you inside it. If you type ls right now, you'll see nothing — it's an empty folder. Not for long.

Launch Claude Code

Type:

claude

You should see the Claude Code prompt. You're now talking directly to an AI that can write code and create files for you, right in this folder.

The Golden Prompt

Here's the thing about Claude Code — the better you describe what you want, the better the result. You need to be specific about the things that matter and let Claude handle the rest.

Here's what a great first prompt includes:

1. What kind of business (bakery, hotel, consulting firm, gym, etc.)
2. The business name and location
3. What sections you want (hero, about, services, testimonials, contact)
4. Color preferences (even vague ones like "warm" or "modern and dark" help)
5. That it should be mobile-responsive
6. What files to create

Here's an example prompt for a bakery:

Build me a professional one-page website for a bakery called "Golden Crust Bakery" in Montreal. It should have: a hero section with a big headline and a short tagline, an about section telling the bakery's story, a menu section showcasing 6 items with names, descriptions, and prices, a testimonials section with 3 customer reviews, and a contact section with the address, phone number, and business hours. Use a warm color scheme. Make it mobile-responsive. Use modern, clean typography. Create index.html and styles.css files.

Type that into Claude Code (or adapt it to your own business) and press Enter.

What Claude Generates

Claude Code will start working. You'll see it creating files — usually index.html and styles.css. It might take 30 seconds to a minute. When it's done, you'll have a complete website in your folder.

Two files. That's your entire website. index.html is the content and structure. styles.css is the design — colors, fonts, spacing, layout.

Preview Your Site

On Mac:

open index.html

On Windows:

start index.html

This opens your website in your default browser. That's it. You're looking at your website.

If things look weird (images not loading, for example), you can run a quick local server:

npx serve

It'll give you a URL like http://localhost:3000. Open that in your browser.

How to Iterate

Your first result will be good, maybe even great. But you'll want to tweak things. That's the process: prompt, preview, adjust, repeat.

Go back to Claude Code and start making requests:

Make the hero section taller — it should take up the full viewport height. Make the main headline bigger, around 4rem.

The gold accent color is too bright. Make it more of a muted, warm gold. Something like #C9A96E.

Add a subtle fade-in animation to each section as the user scrolls down the page.

Every time you make a change, refresh your browser and check if you like it. If not, tell Claude what to adjust.

Tips for Writing Good Prompts

Be specific about what you see, not what you want technically.

• Bad: "Add a CSS grid with 3 columns and gap of 2rem"
• Good: "Make the menu items display in a 3-column grid with space between them"

Reference real websites you like.

I want the hero section to feel like the Apple homepage — big, clean, lots of white space, one strong headline centered on the page.

Give context about your brand. The more Claude understands the vibe, the better the result.

One change at a time. When iterating, don't ask for 10 changes at once. Ask for one or two. Check the result. Then ask for more.

What If the First Result Isn't Great?

Start over with a better prompt. If the whole thing is off, delete the files and write a more detailed prompt:

rm index.html styles.css

Then go back to Claude and try again with a refined prompt.

Use screenshots as reference. If you see a website you love, describe it in detail to Claude.

Be patient with yourself. Your first website won't be perfect, and that's fine. The iteration cycle is so fast that you can experiment without any risk.

You now have a homepage. Let's make it look exactly the way you want.