Build Your Damn Website Summer Camp
from blank screen to live link, checking boxes as you go
You're about to turn your message into a live site! You do NOT need to know how to code. You do need to know what you want to say about yourself, which is why we did the Trail Guide first. I definitely recommend finishing that before we get started here. Follow the instructions below, and by the end, you'll have a live website at your own web address that anyone in the world can visit, and you'll know how to change it whenever you want.
What kind of computer are you on?
The question everyone asks
"Do I need a terminal?" No. A terminal is the black screen with green text that hackers use in movies. It exists, developers use it, and you do not need it. We're using the Claude Code desktop app: a normal application with buttons and windows, like Zoom or Spotify. You will never type a command. You will type sentences in English.
Think of these as the prerequisites for vibe coding. Budget 30–45 minutes.
Claude Code is not on the free Claude plan. You need Claude Pro. It's the one thing that costs money, but you can just get one month and unsubscribe if you like.
| You need | |
|---|---|
| Mac | macOS 13 (Ventura) or newer |
| Windows | Windows 10 or newer |
| Both | 4 GB+ RAM, internet connection |
MacApple menu (top-left) → About This Mac. Check the version number and Memory.
WinStart menu → Settings → System → About. Check "Edition" and "Installed RAM."
Almost any computer bought in the last 6–8 years is fine.
Your computer is hiding part of every filename: it shows index when the file is index.html. We need to see the whole thing.
✅ Checkpoint
Open any folder with photos. Files now read beach.jpg or IMG_4471.HEIC, not just beach. If you can see the bit after the dot, you're done.
Do not skip
Claude Code cannot touch your files without this. It's a background tool; you'll never open it. It just needs to exist.
Done. You will never think about this again.
Claude.dmg).Do not skip. This 20-second check is how you find problems now, instead of when you're mid-build and trying to concentrate.
MacOn some machines a box pops up: "The 'git' command requires the command line developer tools." Click Install, agree, wait a few minutes. One-time, normal.
✅ Checkpoint
You're looking at a screen offering a choice of environment, or asking you to pick a folder.
Asks you to upgrade? Your paid plan is on a different account. Sign out, sign back in with the email from Step 1.1. This is the #1 problem people hit.
"403" error? Quit the app completely and reopen.
Once the Code tab opens without complaining, setup is done.
The thinking work — what your site says, who it's for, your story, your proof — lives in The Trail Guide. Finish it before you start building. It ends with a button that hands you a ready-made script for Claude, and that script is what makes the build fast.
⚠️ iPhone photos: check this or your site will break
The Trail Guide doesn't cover this, so do it here. iPhones save photos as HEIC files. Safari displays them. Chrome, Firefox and Edge do not display them at all. If you build on a Mac and check in Safari, your site looks perfect to you while every Windows visitor sees empty boxes where your face should be.
Look at your photo filenames now (you turned extensions on in 1.3). Anything ending .HEIC needs converting to JPG:
.jpeg copies; bin the HEICs.Stop it at the source for next time: iPhone Settings → Camera → Formats → Most Compatible.
Your website is going to be a folder of files on your computer.
my-website, press Return.my-website, press Enter.Now move your photos and logo into my-website, from your Gear Check folder or wherever they live. Or skip the middleman: move the Gear Check folder itself into Documents and rename it my-website. Either way, the photos end up loose inside one folder in Documents.
✅ Checkpoint
A folder at Documents → my-website with your photos loose inside it. No sub-folders, no HEIC files.
Claude can now read and write files in that folder, and only that folder. It cannot wander into your taxes.
✅ Checkpoint
You see a chat box, with my-website shown as the project name. Wrong folder = everything downstream goes wrong, so check the name.
Near the send button is a dropdown of model names. Think of them as engines: Opus 5 is the most capable and thinks hardest; Sonnet 5 is faster and lighter.
For this project: leave the default, or pick Opus 5 for the best judgment on design and writing.
Before Claude changes anything, it asks. Three modes, switchable anytime:
Start in Manual. Watch two or three changes go by; it demystifies everything fast. Once you're bored of clicking Accept, switch to Accept edits.
Nothing is destroyed either way. Don't like a change? Say "undo that."
Two ways in, depending on whether you did the Trail Guide.
🗺️ Did the Trail Guide? Your prompt is already written
One more thing: I've never coded before, so explain what you're doing as
you go, in plain English. My photos are in this folder. Use them, and tell
me if any are in a format that won't display on the web. Use lowercase
filenames with no spaces for anything you create, and keep index.html at
the top level of this folder.Copy it, fill in your answers, paste into the box, hit Enter. Don't polish it: messy and honest beats tidy and vague.
I want to build a simple one-page personal website. I've never coded before,
so please explain what you're doing as you go, in plain English.
ABOUT ME
My name is: [your name]
What I do, in one sentence: [one sentence]
More about me: [your 3-5 sentences, pasted raw]
THE ONE THING I want visitors to do: [email me / book a call / follow me / etc.]
My contact email: [email]
My links: [instagram / substack / etc.]
WHAT PEOPLE SAY ABOUT ME (optional):
[paste any quotes, with names]
LOOK AND FEEL
Sites I like the look of: [paste 2-3 URLs]
Colors I love: [colors]
Colors I never want to see: [colors]
Overall vibe in three words: [e.g. warm, bold, uncluttered]
PHOTOS
There are photos in this folder. Please look at what's there and use them.
[Say which one is your main portrait if the filename isn't obvious.]
REQUIREMENTS
- One single page, no separate pages to click through
- Must look good on a phone, since most of my visitors will be on phones
- Build it as plain HTML and CSS, no frameworks, so it's simple for me to
keep editing later
- The main file must be called index.html and must sit at the top level of
this folder, not inside a sub-folder
- Use lowercase filenames with no spaces for everything you create
Please build a first version, then tell me what you'd want my feedback on.Claude starts working: reading your folder, then writing files. Click Accept when it asks. Takes a couple of minutes. Let it finish.
index.html at the top level is what makes the site work when published, and lowercase filenames prevent a broken-image problem that only appears after you go live.✅ Checkpoint
Open your my-website folder. A file called index.html sits directly inside it, next to your photos.
my-website folder.Opens in a text editor showing a wall of code instead?
MacRight-click index.html → Open With → Safari or Chrome.
WinRight-click index.html → Open with → Chrome or Edge.
Mac people
Use Chrome for checking your site if you have it. Safari is more forgiving and will show you images most of your visitors can't see. Only have Safari? OK; we catch problems in Step 3.4.
You can also type "show me the site" in Claude; it can open a preview inside the app, next to your conversation, so Claude sees what you see.
file:///…/my-website/index.html. Correct: the site is on your computer, not the internet yet. Part 5 fixes that.✅ Checkpoint
A web page with your name on it, in a browser. Photos visible, not empty boxes or broken-image icons.
The fun part, and where most of your build time goes. Look at your site, find something you don't like, say so in whatever words come naturally:
Tips that make a difference:
Keep going until you look at it and think: yeah, that's me.
Before publishing, paste this in:
Before I publish this, please check and fix:
1. Does it look right on a phone-sized screen?
2. Do all the links work and go where they should?
3. Is my email address correct and clickable?
4. Are any images still in HEIC format? Those won't display in Chrome,
Firefox or Edge, so tell me which ones and I'll convert them.
5. Do any image filenames have capital letters or spaces? Rename them to
lowercase with hyphens and update the page, because the web host is
case-sensitive even though my computer isn't.
6. Are any images so large they'd make the page slow to load?
7. Does the browser tab show a sensible title instead of "Document"?
8. If someone shares this link on social media, what will the preview look
like? Set that up properly with a title, description and image.
9. Any spelling or grammar mistakes?Items 4, 5 and 8 are the three that bite people after going live. Number 5 especially: your computer treats Photo.JPG and photo.jpg as the same file. The web host does not. Perfect locally, images gone the moment it's published.
✅ Checkpoint
Claude reported on all nine and fixed what needed fixing. Refresh the browser, one last look.
Cloudflare Pages will host your site: a computer somewhere keeping it online 24/7. Free. No credit card.
That's it. Don't buy anything. Don't add a domain. If the dashboard offers you plans or products after signup, ignore all of it; the free tier is what we want, and it's the default. Just have the account.
This is how we'll make your site publicly viewable with a link.
You want a PAGE, not a Worker
Cloudflare makes two things that sound similar. Pages is for websites like yours: you hand it a folder of files and it puts them on the internet. Workers is for running code, and it's not what you want. Cloudflare nudges you toward Workers, so read the buttons before you click.
jane-doe → jane-doe.pages.dev. Your name is usually the answer. Taken? Add a middle initial or your town.my-website folder in: the folder itself, not the files inside it. (Dragging won't take? There's a browse link, or zip the folder and drag the zip.)Cloudflare shows you a link like https://your-project-name.pages.dev. Click it. That's your website. Live on the Internet, ready for you to send the link to anyone in the world! Send it to hi@angielake.com!
✅ Checkpoint
Your site loads at the .pages.dev address and your images are showing. Page loads but photos are broken boxes? That's the capital-letters problem; see Troubleshooting.
Open it on your phone before you celebrate. Different device, different browser, no cached files: the honest test.
Now text it to someone. Seriously, before anything else. Text it to a friend and watch them open it.
The part that matters most. A site you can't update is a dead end. The loop never changes:
my-website in the recent list (or Local → Select folder → Documents → my-website).index.html, refresh, check before it goes public.Whole folder, every time
Every deployment replaces the whole site with whatever's in your folder. Always drag the entire folder, not just the file you changed.
You can do this from a coffee shop in ten minutes, forever.
.pages.dev address is free, and the site stays up whether or not you pay anyone. The Claude Pro plan ($20/month) is only needed when you want to change things. Some people keep it because they use Claude for everything else too; others cancel and resubscribe for a month when it's time for a big update. Your site does not go down either way.your-name.pages.dev is a working, shareable address. You could in theory stop here, but it looks more professional to use a custom domain. Want yourname.com, or something else fun? Roughly $10–15/year, the only ongoing cost. I have used GoDaddy easily.
First, which kind do you want?
| Type | Looks like | Pick this if… |
|---|---|---|
| Bare domain most people want this | yourname.comlike angielake.com, Angie's personal site | This site is your main home on the internet. It's the one you put on a business card, say out loud, or print on a sticker. |
| Subdomain | hi.yourname.comlike camp.angielake.com | You already own a domain that's being used for something else, and this site is a separate corner of it. Angie's angielake.com lives on Squarespace, while camp.angielake.com is a Cloudflare page hanging off the same domain: two different sites, one domain. |
If you don't already own a domain and this is your main site: get the bare domain. You can always add subdomains to it later.
Bare domain (yourname.com). The domain has to be managed by Cloudflare, so there's one extra step: buy the domain (GoDaddy, Namecheap, Cloudflare itself) → in Cloudflare click Add a site and enter your domain → Cloudflare gives you two nameservers → enter those at the place you bought the domain, replacing what's there → wait for Cloudflare to say the domain is active (a few hours, sometimes up to a day) → then Pages project → Custom domains → Set up a domain.
Subdomain (hi.yourname.com). Simpler, and your domain can stay wherever it's registered. Pages project → Custom domains → Set up a domain → enter the subdomain → add the CNAME record Cloudflare gives you at your registrar, pointing to your-project.pages.dev.
One rule for both
Always add the domain through the Custom domains button in your Pages project. Hand-made DNS records instead = a cryptic 522 error and an hour of confusion.
Photo.JPG and photo.jpg are the same file; the web host doesn't. Tell Claude: "The images aren't loading on the live site. Rename every image to lowercase with hyphens and no spaces, and update every reference in the HTML to match exactly." Redeploy. Failing that, check the images are inside the folder you uploaded.index.html isn't at the top level of what you uploaded; it's probably one folder deeper. Drag my-website itself, not a folder containing it.Folder: where your website lives. Yours: Documents/my-website.
index.html: the main page. Every website has one. Don't rename it; don't let it slip into a sub-folder.
HTML: the structure and words of the page. CSS: the colors, fonts, spacing.
HEIC: the photo format iPhones use. Doesn't work on most browsers. Convert to JPG.
Deploy / publish: copying your folder onto the internet.
Hosting: the service keeping your site online 24/7. Yours: Cloudflare Pages. Free.
Domain: a web address you own, like yourname.com. ~$12/year. Optional.
DNS: the phone book of the internet, connecting a domain to the site it points to.
Cache: your browser's memory of a page. Why a refresh sometimes shows the old version.
Terminal: the scary black screen. You are not using it. It's fine.
Git: a background tool Windows needs. You'll never open it.
Prompt: what you type to Claude. That's all it means.
Pages vs. Workers: two Cloudflare products. Pages puts a folder of files on the internet, which is what you want. Workers runs code, which you don't need.
Your website is a folder on your computer that you can drag onto the internet whenever you want. That's the whole secret. Not a subscription you're trapped in, not a platform that changes its pricing on you. You own the folder. You control what's in it. You can update it forever, for free.
You did not learn to code. You learned something more useful: you can build and change your own corner of the internet whenever you feel like it.
Go be freakin' awesome about it.
Progress saves in this browser, on this computer.