Module 4 · Build your website
Make it yours: images, forms & polish
Your site exists. Now we make it unmistakably yours — with real photos, a contact form that actually reaches you, and the small polish moves that separate “a website” from “your website.” Still all in plain English; Claude does the work.
Get real images onto your site
Nothing tells a visitor “this is a real, local business” faster than real images. You have three honest sources — in order of trust:
Your own photos
Best for local trust. A phone photo in good light beats generic stock every time.
Free stock
Unsplash or Pexels — license-safe and free. Great for backgrounds and mood.
AI-generated
Fine for abstract or decorative art. Never for “your team” or “your shop” — that’s dishonest.
Once you’ve gathered a few images into a folder, point Claude at them:
Add your real photos
I've put some photos in a folder called images inside my project. Please use them: put the storefront shot in the homepage hero and the team photo on the About page, and pick sensible spots for the rest. Optimize them so the site still loads fast, and add plain, descriptive alt text to each so it's accessible.
Unsplash (unsplash.com) and Pexels (pexels.com) are both free for commercial use, no attribution required. Download a few, drop them in your images folder, and let Claude place them.
Add a contact form that actually works
Here’s something almost every guide skips: a website like this can’t receive form submissions on its own. A “Contact” form needs a small, free helper service to catch the message and email it to you. Without one, a form looks fine but silently goes nowhere — one of the most common ways businesses lose leads without ever knowing.
The easiest free option is Web3Forms: you give it an email address, it gives you an “access key,” and every form submission lands in your inbox. Its free tier covers 250 messages a month — plenty for a small-business site. (Formspree is a fine alternative; its free tier allows 50 a month.) Let Claude wire it up:
Add a working contact form
Please add a contact form to my Contact page that sends every submission to my email using Web3Forms (the free tier is fine). Walk me through creating the free account and getting my access key first — tell me exactly what to click and where to paste the key. Then add simple spam protection and a friendly "thanks, we'll be in touch" message after someone sends it.
Once it’s wired up, send yourself a message through the form and confirm it arrives. A form you’ve never tested is a form you can’t rely on.
When something looks wrong: what to say
Beginners hit the same few walls. None of them are a big deal — here’s exactly what to paste to Claude for each:
| What you see | What to say to Claude |
|---|---|
| Blank white page or error screen | “The preview shows an error — here’s a screenshot. Please fix it and tell me what happened in one sentence.” |
| Your change didn’t show up | “I don’t see the change — is the preview still running? Please restart it and give me the link again.” |
| It looks broken on my phone | “Here’s a phone screenshot — please fix the layout on small screens without changing the desktop version.” |
| Claude went down a rabbit hole | “Stop — let’s try a simpler approach.” Then use /rewind (below) to go back to before the detour started. |
Claude Code quietly saves a copy of your files before every message you send. Type /rewind — or press Esc twice on an empty message box — and you get a list of everything you’ve asked in this session, with the option to put your files back exactly as they were before any one of them. You can rewind the conversation along with the files, or just the files, whichever you want.
Two honest limits, because it matters that you know them. It can’t undo something a command did on its own — deleting or moving files, for instance. And it is not a replacement for the Git snapshots; those are your real backup. Use /rewind for “that last change made it worse, take it back,” and keep saying “save a snapshot” at the good moments.
Polish moves worth asking for
The finishing touches that make a site feel considered rather than assembled:
Subtle motion
“Add gentle fade-ins as sections scroll into view.”
A real favicon
“Make a favicon from my logo so my tab looks branded.”
Fast everywhere
“Compress the images so pages load instantly on phones.”
Real photos, a working contact form, the rough edges smoothed. Your site doesn’t just exist — it feels like your business. Next we run a proper audit to make sure it’s flawless on every screen.
Overwhelmed by choices? Do the minimum that matters: one good hero photo and a working contact form. Everything else here you can add later, any time, with one sentence to Claude.
More learning resources
Still want another angle? These are hand-picked and vetted to line up with this lesson — from creators and sites worth your time.