🚀 ✅
SiteSteps
✦ No coding experience needed

Build your
website yourself,
step by step.

A friendly, plain-English guide for anyone who wants a real website — no technical background required. Just follow the steps.

Welcome to SiteSteps

What is this guide, and who is it for?

SiteSteps is a simple, step-by-step guide that walks you through building a real website from scratch — even if you've never done anything like this before. Whether you're a small business owner, a freelancer, a creator, or someone who just has an idea they want to share with the world, this guide was made for you.

You don't need to know how to code. You don't need to hire a web developer. And you don't need to spend a fortune. With the right tools (most of them free) and a little guidance, you can have a real, professional-looking website live on the internet by the time you finish this guide.

🗺️
What this guide is
A clear, numbered path from "I have an idea" all the way to "my website is live." No jargon, no overwhelm — just one step at a time.
🛠️
What tools you'll use
Free and low-cost tools that do the heavy lifting for you — including AI that writes code on your behalf. You just describe what you want.
🎯
What you'll end up with
A fully working website with your own domain name, your own branding, and features like contact forms, analytics, and email signups.
How to use this guide

Follow the steps in order — it's that simple.

Use the menu on the left to move through the 10 steps. Each step tells you exactly what to do, which tools to use, and why. You can track your progress as you go — when you finish a step, mark it as done and watch your progress bar grow.

Don't skip ahead — each step builds on the one before it. And don't worry if something feels unfamiliar. Every tool in this guide is designed for regular people, not programmers.

What will you build?

One guide. Endless possibilities.

SiteSteps isn't just for business websites. Anything you can imagine living on a screen — you can build it. Here are just a few of the things people are creating with Claude and this guide, most of them in a single weekend.

🏢
Business Website
A professional home for your brand, services, and contact info.
⚡ 1–2 days
💼
Freelance Portfolio
Showcase your work and win clients — without hiring a designer.
⚡ 1 day
💍
Wedding Website
RSVP, schedule, photos, travel info — all in one beautiful page.
⚡ A few hours
👶
Baby Announcement
Share the news with a personal page friends and family will love.
⚡ 1–2 hours
🎉
Event Invitation
Birthdays, reunions, graduations — a custom invite page that wows.
⚡ 1–2 hours
📸
Family Photo Hub
A private gallery to share memories with the people who matter most.
⚡ A few hours
🍕
Restaurant Page
Menu, hours, reservations, and your story — all in one place.
⚡ 1–2 days
📝
Blog or Newsletter
Share your ideas, build an audience, and grow a loyal readership.
⚡ 1 day
🎓
Resume / CV Page
Stand out from other applicants with a personal website employers remember.
⚡ A few hours
✨
Something New
If you can describe it in plain English, Claude can build it.
⚡ Your idea
⚡
How fast can you really build these?
Faster than you think. A simple announcement page or event invitation can be live in 2–3 hours — start to finish. A full business website with a custom domain typically takes a weekend. A portfolio, blog, or restaurant page lands somewhere in between. The secret is that you're not writing code — you're having a conversation. Claude does the building while you focus on what you want it to say.
Your 10-Step Journey at a Glance

🛠️ Your Full Toolkit

Every tool you'll use on this journey — explained in plain English with no tech-speak.

⚡ Advanced Setup Guides Step-by-step install instructions for power users

These three tools take Claude beyond the browser — embedding it directly into your code editor or Terminal. They're for users who want to move faster and have more control. Each one has a clear install guide below.

💻
VS Code + Claude Extension
Free • Mac, Windows & Linux • Claude lives inside your editor

Visual Studio Code (VS Code) is the world's most popular free code editor — used by millions of developers. Once you install it, you can add a Claude extension that puts Claude's chat window right inside your editor. Ask it to explain your code, generate new sections, or fix problems — all without switching to a browser tab.

  • 1
    Download and install VS Code
    Go to code.visualstudio.com and download the version for your operating system (Mac, Windows, or Linux). Run the installer — it takes about 2 minutes. VS Code is completely free.
  • 2
    Open VS Code and go to Extensions
    Click the Extensions icon in the left sidebar (it looks like four squares), or press Cmd+Shift+X on Mac / Ctrl+Shift+X on Windows. This opens the Extensions marketplace.
  • 3
    Search for and install the Claude extension
    Type "Claude" or "Anthropic" in the search box. Look for the official extension by Anthropic. Click Install. Once installed, a Claude chat panel will appear in your sidebar.
  • 4
    Sign in with your Claude account
    Click the Claude panel and sign in using the same email and password you use at claude.ai. Once signed in, Claude has access to your open files — it can read your code, suggest changes, and write new sections on command.
  • 5
    Open your website folder and start chatting
    In VS Code, go to File → Open Folder and select the folder where your website files live. Now you can highlight any part of your code, right-click, and choose "Ask Claude" — or type your request in the Claude sidebar and watch it work on your actual files.
💡 What to say to Claude in VS Code: "Add a new testimonials section after the hero." / "Why isn't this button showing up correctly?" / "Make the mobile version of this page look better." Claude sees your code directly, so its answers are always specific to your file.
🍎
Xcode + Claude (Mac Only)
Free • Mac only • Apple's native code editor with Claude assistance

Xcode is Apple's free code editor that comes pre-installed on many Macs or is available free from the App Store. While it's primarily used to build iPhone and Mac apps, it's a capable editor for website files too. You can bring Claude into your Xcode workflow using an extension or by running Claude Code in the integrated terminal — giving you AI assistance without leaving your Apple environment.

  • 1
    Install Xcode from the Mac App Store
    Open the App Store on your Mac, search for "Xcode", and click Get/Install. It's free and made by Apple. Note: the download is large (~7–10 GB), so give it time. Once installed, open Xcode and accept the license agreement.
  • 2
    Open your website project in Xcode
    Go to File → Open and navigate to the folder containing your website files (your index.html, images, etc.). Xcode will display your files in the left panel — click any file to open and edit it.
  • 3
    Open the integrated Terminal inside Xcode
    Go to the menu bar and select View → Debug Area → Activate Console, or press Cmd+Shift+C. This opens a terminal window at the bottom of Xcode — you can run Claude Code commands directly here (see the Terminal guide below for setup).
  • 4
    Use Claude alongside Xcode in a split view
    The simplest way to use Claude with Xcode is to open claude.ai in Safari and use macOS split-screen: drag Xcode to one half of your screen and Safari (with Claude open) to the other. Copy code from Claude, paste it into Xcode. This workflow is smooth and requires no additional setup.
  • 5
    For deeper integration: install Claude Code in Xcode's terminal
    Once you've set up Claude Code in Terminal (see below), you can run it directly inside Xcode's built-in terminal panel. This lets Claude read and edit your project files without you switching away from Xcode at all.
🍎 Mac tip: Xcode works best as a file viewer and editor alongside Claude in the browser or terminal. For a fully integrated AI coding experience on Mac, pair Xcode with the Claude Code Terminal tool below — they complement each other perfectly.
⌨️
Claude Code in Terminal
Free • Mac & Windows • The most powerful way to use Claude — for advanced users

Claude Code is a command-line tool that runs Claude directly in your computer's Terminal (on Mac) or Command Prompt/PowerShell (on Windows). Instead of copying and pasting code, Claude can read your project files directly, make changes autonomously, run commands, and build things on your behalf. This is the fastest and most powerful way to use Claude — it's like having a developer who can actually touch your files, not just give advice.

⚠️ What you need first
You need Node.js installed on your computer before you can install Claude Code. Node.js is free software that many tools depend on. Don't worry — installing it takes just 2 minutes and the instructions below walk you through it.
  • 1
    Install Node.js (required first step)
    Go to nodejs.org and download the LTS version (the recommended one). Run the installer — accept all defaults. Node.js is free and safe. Once installed, you'll be able to run the Claude Code installer in the next steps.
  • 2
    Open your Terminal (Mac) or PowerShell (Windows)
    On Mac: Press Cmd+Space, type "Terminal", and press Enter.
    On Windows: Press the Windows key, type "PowerShell", right-click it, and choose "Run as Administrator."
    You'll see a black or white window with a blinking cursor — that's your terminal.
  • 3
    Install Claude Code with one command
    Type (or copy-paste) the following into your terminal and press Enter:
    npm install -g @anthropic-ai/claude-code
    Wait for it to finish — you'll see text scrolling past. When it stops and shows your cursor again, Claude Code is installed.
  • 4
    Navigate to your website folder
    In your terminal, type cd followed by the path to your website folder. The easiest way on Mac: type cd (with a space after it), then drag your website folder from Finder directly into the terminal window — it auto-fills the path. Press Enter.
    cd /Users/yourname/Documents/my-website
  • 5
    Start Claude Code and sign in
    Type the following and press Enter:
    claude
    Claude will ask you to sign in with your Anthropic account. Follow the link it gives you, log in, and you'll be returned to the terminal. You're now running Claude directly on your computer.
  • 6
    Give Claude instructions in plain English
    Once running, just type what you want — the same way you would on claude.ai. Claude can see all your files and will make changes directly. For example:
    Add a footer with my contact email and social links
    Claude will read your files, make the changes, and confirm what it did. No copying, no pasting — it works directly on your project.
⚡ Why this is so powerful: Claude Code in Terminal can handle entire projects autonomously. You can say "build me a multi-page website based on these notes" and walk away — it creates files, writes code, and organizes everything. It's the closest thing to having a real developer working on your site.

🔁 Tool Overlap Guide

Some tools are so useful, you'll use them across multiple steps. Here's where each tool shows up.

Why this matters

Learn a tool once, use it everywhere.

Once you get comfortable with a tool in an early step, you'll see it pop up again later. This means you're not constantly learning something brand new — you're building confidence with the same set of trusted tools.

✨ Cool Add-Ons

Extra tools that can take your website to the next level — totally optional, but really useful.

Bonus tools

You don't need these to launch — but you'll want them.

These tools aren't required in the 10 steps, but they're the kind of extras that can make your site look more polished, help more people find you, or make your life easier once you're up and running.

🔄 Reference Guide

How to Update
Your Website

Your site is live — now what? Here's exactly how to make changes, fix things, and keep your website growing over time.

The basics

Updating your site is simpler than you think.

Once your site is on GitHub and connected to Netlify, every update follows the same pattern: make a change to your file, save it to GitHub, and Netlify automatically rebuilds your live site within about 30 seconds. That's it. You never need to manually re-deploy.

🖥️
Method 1
Edit on GitHub
Quickest for small text edits. No downloads needed — works entirely in your browser.
💻
Method 2
Edit Locally + Upload
Best for bigger changes. Edit on your computer with Claude's help, then push to GitHub.
⌨️
Method 3
Claude Code in Terminal
Most powerful. Claude edits your files directly and you push one command to go live.
🖥️
Method 1 — Edit Directly on GitHub
Best for: quick text changes, fixing typos, updating links • No downloads needed

GitHub has a built-in file editor you can use right in your browser. This is the fastest way to make a small change — no software required, just your GitHub login.

  • 1
    Go to github.com and open your repository
    Log in to GitHub and click on your website's repository (the folder that holds your site files). You'll see your files listed — usually just index.html and maybe an images folder.
  • 2
    Click on index.html to open it
    Click the filename. You'll see your file's contents displayed. Don't worry — it's just code. You only need to find and change the specific words or sections you want to update.
  • 3
    Click the pencil ✏️ icon to edit
    You'll see a pencil icon in the top-right area of the file view. Click it. The file becomes editable — like a text document. Use Ctrl+F (or Cmd+F on Mac) to search for the exact words you want to change.
  • 4
    Make your changes
    Find the text you want to update and type your new version. For example, if your contact email changed, search for the old email address and replace it. Only change the words between the quotes or tags — leave everything else as-is.
  • 5
    Click "Commit changes" to save
    Scroll to the bottom of the page and click the green "Commit changes" button. Add a short note about what you changed (e.g. "Updated contact email") — this is just for your own records. Click Commit. Netlify will rebuild your live site in about 30 seconds.
✅ How to confirm it worked: Visit your live website URL after about 60 seconds and check that your change appears. If it doesn't, wait another minute and refresh — Netlify rebuilds automatically but occasionally takes a moment longer.
💻
Method 2 — Edit Locally with Claude, Then Upload
Best for: bigger changes, new sections, redesigns • Uses Claude to make edits

For bigger updates — adding a new section, redesigning a page, or making multiple changes at once — it's easier to work with Claude on your local copy first, then upload the finished file to GitHub.

  • 1
    Download your current file from GitHub
    Go to your GitHub repository, click on index.html, then click the download icon (or click "Raw", then right-click and Save As). Save it to your Desktop or a folder you can easily find. This is your working copy.
  • 2
    Open Claude and describe what you want changed
    Go to claude.ai, start a new chat, and upload your index.html file (drag it into the chat). Then describe exactly what you want: "Add a testimonials section with 3 quotes after the services section" or "Change the hero headline to say X." Claude will give you back updated code.
  • 3
    Save Claude's updated file to your computer
    Copy the updated code Claude gives you. Open your existing index.html file in a plain text editor (TextEdit on Mac, Notepad on Windows — not Word). Select All, Delete, paste Claude's new code, and Save. Your local file is now updated.
  • 4
    Upload the updated file to GitHub
    Go back to your GitHub repository. Click on index.html, then the pencil ✏️ icon. Select All the existing content, Delete it, then paste your entire updated file. Alternatively, drag and drop your updated file directly onto the repository page — GitHub will ask if you want to replace it. Click Commit changes.
  • 5
    Check your live site
    Wait 30–60 seconds, then visit your website URL. Your changes should be live. If something looks wrong, go back to Claude, describe the issue, and repeat the process — it only takes a few minutes per round.
💡 Tip: Always keep a backup copy of your working index.html on your computer before uploading a new version. That way, if something goes wrong, you can always roll back to the previous version.
⌨️
Method 3 — Claude Code in Terminal (Advanced)
Best for: frequent updates, large changes, hands-free editing • Requires Terminal setup

If you've set up Claude Code in Terminal (see the Toolkit page), this is the fastest and most powerful way to update your site. Claude edits your files directly on your computer, and one command pushes everything to GitHub — no copy-pasting required.

  • 1
    Open Terminal and navigate to your website folder
    Open Terminal (Mac: Cmd+Space, type Terminal) and navigate to your project folder. If you've done this before, type:
    cd /path/to/your/website-folder
  • 2
    Start Claude Code
    Type claude and press Enter. Claude will start up and show you a prompt. It already has access to all your files in the current folder.
    claude
  • 3
    Tell Claude what to change in plain English
    Just type your request and press Enter. Claude reads your files, makes the changes, and confirms what it did. Examples:
    Update the hero headline to "Welcome to [Your Business Name]"
    Add a new FAQ section with 5 questions about our services
    Change the primary color from orange to navy blue throughout
  • 4
    Push your changes to GitHub with one command
    When you're happy with the changes, exit Claude (type /exit) and run these three commands in order — copy, paste, and press Enter after each one:
    git add .
    git commit -m "Updated homepage content"
    git push
    That's it — Netlify detects the push and rebuilds your live site automatically within 30 seconds.
⚡ First time using git push? If you haven't connected your local folder to GitHub yet, Claude Code can help you set that up too. Just ask: "Help me connect this folder to my GitHub repository and push my files." Claude will walk you through it step by step.
Common updates made easy

What to say to Claude for the most common changes

Not sure how to phrase your request? Here are ready-to-use prompts for the updates most website owners make. Just copy, customize the details, and paste into Claude.

📝 Updating text or copy
"Change the headline on the homepage to: [your new headline]. Keep everything else the same."
➕ Adding a new section
"Add a testimonials section after the services section. Include 3 quotes with names. Here are the quotes: [paste them]."
🎨 Changing colors or fonts
"Change the primary button color from orange to dark green. Update all buttons and links consistently."
📱 Fixing mobile display
"On mobile, the navigation menu overlaps the hero text. Fix the layout so everything stacks correctly on small screens."
🔗 Updating contact info
"Update my contact email from old@email.com to new@email.com everywhere it appears on the site."
📄 Adding a new page
"Add a new 'Blog' page to my navigation. Create a simple blog listing page with a header and space for 3 post previews."
The Golden Rule

Whatever changes on GitHub → goes live automatically.

You never need to manually re-deploy or re-upload to Netlify. The moment you commit a change to GitHub, Netlify picks it up and your live site updates within 30 seconds. Just change the file, commit, and you're done.

✦ Built with this exact method

You just used a website
built by someone who had
zero coding experience.

This entire guide — every page, every layout, every button — was built using the exact same steps you just read. No developer. No agency. No coding. Just plain English and Claude.

The honest story

This site didn't start with a developer. It started with an idea.

The person who built SiteSteps had never written a line of code. No HTML. No CSS. No idea what a "repository" was. What they had was an idea — a simple, useful guide for people like them — and the curiosity to see if AI could really do what everyone was saying it could.

It could. And then some.

Every section you've seen on this site was described in plain English — the way you'd explain something to a helpful friend — and Claude built it. "Make the sidebar darker." "Add a progress bar that fills as I complete steps." "I want a card that shows the tool name, what it does, and how to use it in this specific step." That's it. That's the whole process.

There was no coding. There were no late nights debugging mysterious errors. There was just a conversation — and a website that got better with every message.

0
Lines of code written by hand
10
Steps from idea to live website
100%
Built using plain English descriptions
$0
Spent on developers or designers
What this means for you

If it worked for us, it will work for you.

We're not saying this to be motivational. We're saying it because it's literally true. The tools in this guide don't care if you've never touched a computer before. They don't care if you're 22 or 72. They don't care if you failed every technology class you ever took. They only care about what you want to build — and then they build it.

The biggest thing standing between you and a live website right now isn't skill. It isn't money. It isn't even time. It's just starting. Following the first step. Typing the first sentence into Claude. That moment — that first "hello, help me build a website" — is the hardest part. Everything after it is just a conversation.

Before AI tools existed
✗ Learn to code (months or years)
✗ Hire a developer ($2,000–$20,000+)
✗ Depend on someone else for every change
✗ Wait weeks for updates to go live
✗ Give up because it was too complicated
With Claude + this guide
✓ Describe what you want in plain English
✓ Build a real website for free or nearly free
✓ Make changes yourself, any time you want
✓ Updates go live in under 60 seconds
✓ Actually finish it — because it's genuinely doable
What the process actually feels like

Less like learning, more like having a conversation.

Here's what building with Claude actually looks like day to day. It's not complicated. It's not intimidating. It's genuinely just talking through what you want — the same way you'd explain it to a friend who happened to be an expert.

A real conversation that built part of this site
"I want a sidebar on the left that shows all 10 steps. When someone is on Step 3, it should be highlighted. When they finish a step, it should show a checkmark."
"Got it. I'll build a fixed sidebar with numbered nav items, highlight the active step in terracotta, and add a green checkmark state when steps are marked complete. I'll also add a progress bar at the top that fills as you finish steps..."
"Perfect. Also make the sidebar collapse to just icons on mobile so it doesn't take up too much space."
"Done. On screens under 900px, the sidebar shrinks to 64px and shows only the step numbers — labels and emoji are hidden. Here's the updated code..."
That sidebar you're looking at right now? Built in that exact conversation. No coding required.
Words to remember

Three things to hold onto as you build.

"The best website you'll ever build is the one you actually finish. A live, imperfect site beats a perfect idea that never gets built."
On shipping your first version
"You don't need to understand the code. You need to understand what you want. Claude handles the gap between those two things."
On working with AI
"Every update makes your site a little better. Every visitor gives you a little more insight. The site you have in six months will be miles ahead of what you launch today — and that's exactly how it's supposed to work."
On growing over time
🚀

Your website is waiting.
It won't build itself — but Claude will.

You've seen the steps. You know the tools. You know it works because you're looking at the proof right now. The only thing left is to start.

Jump to any step
SiteSteps
sitesteps.ai  ·  sitesteps.org  ·  sitesteps.net
📚 Reference

Resources

Everything you need to build, launch, and grow your website — in one place.

Start here

Website Layout — How Every Site Is Built

Every website — no matter how complex — is built from the same core sections. Understanding these zones helps you describe exactly what you want to Claude. Here's the blueprint:

Website Layout — yourwebsite.com
🔝 HEADER / NAVIGATION
Your logo + navigation links. Appears on every page. Should be clean and consistent throughout the site.
💡 Keep it simple — logo left, links right. No more than 5 nav items.
⭐ HERO SECTION
The first thing visitors see — your big headline, subheadline, and main call-to-action button. This is the most important section on your site.
💡 Your headline should answer: What is this? For whom? Why should I care?
✅ TRUST / FEATURES BAR
A row of quick credibility signals — years of experience, number of clients, awards, guarantees. Reassures visitors before they scroll deeper.
💡 3–5 short stats or trust signals. Keep each one under 5 words.
📄 CONTENT / SERVICES SECTION
The main body of your page — where you describe what you offer, show your work, or tell your story. Usually 2–4 sections stacked vertically.
💡 Each section should have one job. Describe services, show portfolio, share story — not all at once.
💬 SOCIAL PROOF / TESTIMONIALS
Reviews, quotes, client logos, or case study results. Visitors trust other people's opinions more than anything you say about yourself.
💡 Real quotes with full names convert better than anonymous ones. Even 3 solid testimonials make a difference.
🎯 CALL TO ACTION (CTA)
A dedicated section that tells visitors exactly what to do next — book a call, send a message, download something, sign up. One clear action per page.
💡 Use a contrasting background color here so this section stands out from the rest of the page.
🔚 FOOTER
The bottom of every page — contact info, navigation links, social media, copyright, privacy policy. Dark background is conventional and helps it feel like a proper closing.
💡 Your phone number or email should always appear in the footer. People scroll to the bottom specifically to find contact info.
Tell Claude which zone to build using these exact names — it understands them perfectly.
For photo-heavy sites

Building a Photo Library or Gallery

Wedding sites, baby announcement pages, family photo hubs, and event pages all need a way to display and share photos beautifully. Here's the best free approach — no coding required.

📸
Step 1 — Host your photos for free

Don't put photos directly in your website file — they make it huge and slow. Use a free hosting service instead:

Google Photos (Recommended)
Upload photos, create an album, click Share → Get link. Free and unlimited for compressed photos.
Cloudinary (Best quality)
Free tier gives you 25GB. Upload photos, copy the URL for each. Best for full-resolution display.
Imgur (Quick and simple)
Upload any photo, get a direct link instantly. Best for quick, informal photo sharing.
🤖
Step 2 — Ask Claude to build your gallery

Once your photos are hosted, give Claude the URLs and describe the gallery style you want:

Wedding Gallery Prompt
"Add a photo gallery section to my wedding website. Use a masonry grid layout. Here are my photo URLs: [paste URLs]. Add a lightbox so clicking a photo opens it full-screen. Include a caption area under each photo."
Baby/Family Gallery Prompt
"Build a private family photo hub page. Organize photos into albums: Hospital, First Week, Month 1, etc. Each album shows a cover photo and photo count. Clicking opens the album. Use these photos: [paste URLs]."
💡
Pro tip for private galleries
If you want your photo gallery to be private — visible only to people you share the link with — simply don't submit your site URL to Google. As long as you don't actively publicize it, a Netlify URL shared directly with family is effectively private. For stronger privacy, Netlify also offers password protection on their paid plans.
Quick reference

All Tools at a Glance

Every tool mentioned in SiteSteps — with direct links and one-line descriptions.

Ready-to-use prompts

Prompt Packs

25 tested, ready-to-use Claude prompts for each website type — available at sitesteps.ai.

🍕
Restaurant
25 prompts
💼
Portfolio
25 prompts
🏢
Small Business
25 prompts
🛒
E-Commerce
25 prompts
📝
Blog & Creator
25 prompts
🚀
Landing Page
25 prompts
💍
Wedding & Events
25 prompts
👶
Life Announcements
25 prompts
🎓
Resume & Brand
25 prompts
🏠
Real Estate
25 prompts

Available at sitesteps.ai

❓ Common Questions

Frequently Asked
Questions

Everything you're wondering about before you start — answered honestly.