Build Your Website

Tonight: the rough draft. Real, working, ugly.

• Claude Code launching from inside your Claude Desktop app
• A 6-page website running on your computer
• A working contact form (opens your email for now)
• The mindset: "I describe, Claude builds."

Then Session 8 puts it on the internet.

Drafts are fast. Polish is slow.

Most of building with Claude Code is iteration. 80% of your time, forever. Tonight is the fast 20% — we get to "ugly but real" quickly so next week is pure iteration.

Six pages.

Claude Code = Claude with hands.

• Makes files on your computer
• Edits files on your computer
• Reads the folder, knows what's there

Same brain. Different access. Inside the same Desktop app you've been using.

1. File Explorer → Desktop → New Folder → website
2. Open Claude Desktop → click the Claude Code button
3. Point it at Desktop\website

No terminal. No install. No PowerShell.

Hello world.

Create an HTML file called hello.html that
says "Hello from [COMPANY NAME] — roofing
and solar in [CITY]" as a big headline.

Dark background, light text.

Open it in my browser when done.

Ugly. Tiny. Works. That's the whole game.

Step 1 — the scaffold.

All 6 pages. Shared nav. Shared footer. Shared styles.css. No content yet — just structure and linking.

Build the scaffold for my company's website in this folder.

Six pages: index.html (home), roofing.html, solar.html, bundle.html, about.html, contact.html.

Every page should share:
- A top navigation bar with links to all 6 pages, plus our phone number on the right
- A consistent footer with the company name, phone, and a copyright line
- Dark mode by default (dark backgrounds, light text)
- Mobile-friendly

Use a single shared stylesheet — styles.css — so all pages look like one site.

Company name: [COMPANY NAME]
Phone: [PHONE NUMBER]
City: [CITY], [STATE]

Just put one big H1 on each page with the page name as a placeholder. We'll fill in real content next.

Make sure I can open index.html in my browser and click through every page without anything broken.

Step 2 — fill in the home page.

Hero from your Session 5 landing copy. Plus 3 short sections: roofing, solar, bundle.

Fill in index.html (home page) with this hero section at the top:

Headline: [PASTE HEADLINE]
Subheadline: [PASTE SUBHEADLINE]
CTA button: [PASTE CTA TEXT] — make it link to /contact.html
Trust line: [PASTE TRUST LINE]

Below the hero, add three short sections:
1. "Roofing" — 2-3 sentences from my service menu about roofing
2. "Solar" — 2-3 sentences about solar
3. "Bundle and save" — 2-3 sentences on the bundle pitch, with a "Learn more →" link to /bundle.html

Hero should feel big and confident. Image area on the right side (placeholder gray block that says "roof + solar hero image").

Step 3 — the interior pages.

Roofing, Solar, Bundle, About. Content pulled from your service menu + personas. One big prompt fills all four.

Fill in roofing.html, solar.html, bundle.html, and about.html using the content below.

ROOFING.HTML:
1. Headline: "Roofing built for [CITY] weather"
2. What we install — [PASTE ROOFING SECTION]
3. Our process — 5 steps
4. Why us — 3 short bullets
5. CTA: "Get a free roof estimate" → /contact.html

SOLAR.HTML:
1. Headline: "Solar that pays for itself"
2. What we install — [PASTE SOLAR SECTION]
3. How it works — sizing → install → monitoring
4. Financing — 2-3 sentences
5. CTA: "Get a solar estimate" → /contact.html

(continued on the next slide →)

BUNDLE.HTML:
1. Big headline: "Why pay for both jobs twice?"
2. The math — bullets showing how bundling saves money
3. Who this is for — 2-3 sentences naming my bundle persona
4. Callout: "One crew. One project window. Both jobs done."
5. CTA: "See your bundle estimate" → /contact.html

ABOUT.HTML:
1. Headline: "We're not a chain. We're your neighbors."
2. Story — 2-3 paragraphs about being family-owned, local
3. The crew — placeholder for team photos
4. Our commitment — 3 bullets
5. CTA: "Get a free estimate" → /contact.html

Use the same nav, footer, and styles.css. Don't break anything that already works.

Step 4 — the contact form.

Name, email, phone, address, project type. Submit opens your email app for now — Session 8 wires it to a real handler.

Build out contact.html with a real contact form.

Sections:
1. Headline: "Get a free estimate — same week."
2. Subheadline: one line on how fast we respond
3. Form fields:
   - Name (required)
   - Email (required)
   - Phone (required)
   - Address (required)
   - Project type (dropdown: Roof, Solar, Both — required)
   - Roof age in years (optional)
   - Anything else (text area, optional)
   - Submit button: "Send my request"
4. To the right (or below on mobile): our phone, big and clickable (tel: link), and "we usually respond within 4 hours."

For now, when the form is submitted, open the user's email client with a pre-filled message to [HIS EMAIL] containing all field values. We'll wire up real form handling when we deploy in Session 8.

Style the form so it feels trustworthy.

1. Read every page. List 3-5 things to fix.
2. One prompt with all the fixes. Refresh.
3. Close Claude Code. Double-click index.html — confirm it works alone.
4. Right-click website → Send to → Compressed folder → email it to yourself.

Six pages. Real content. Working links. A working form. On your computer right now.

Show it to one person.

Don't ask "what do you think?" — ask "what's the first thing you'd click?" Bring 3 things you want different to Session 7.

Session 7 — Polish.

Same Claude Code, different muscle. Brand colors, real typography, real photos, mobile layout, persona-tuned copy. You drive — I just nudge.

Bring: your list of 3+ tweaks. Any real job photos you have on your phone.