Build Your Website

What You'll Need

You only need three things to get started. Everything else gets introduced when you need it.

• A terminal — already on your computer. On Mac, open the Terminal app (search for "Terminal" in Spotlight). On Windows, open Command Prompt (search for "cmd" in the Start menu) or PowerShell.
• Node.js installed on your computer — nodejs.org
• A Claude Code subscription — sign up at claude.ai. Claude Code is included with Claude Pro, Team, and Enterprise plans.

Step 1: Install Claude Code

Claude Code is an AI-powered CLI that lives in your terminal. It can read your project, understand what you're building, and write code for you. Instead of Googling every question, you describe what you want and Claude builds it. It's your co-pilot for the rest of this workshop.

Open your terminal and install Claude Code:

macOS / Linux / WSL:

curl -fsSL https://claude.ai/install.sh | bash

Windows (CMD):

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

Windows (PowerShell):

irm https://claude.ai/install.ps1 | iex

Once installed, launch it:

claude

The first time you run Claude Code, it will ask you to log in to your Anthropic account in the browser. Follow the prompts to authenticate — this only happens once. Once you see the Claude Code prompt, you're ready for the next step.

Step 2: Add Plugins

Plugins give Claude Code superpowers. They connect it to documentation, design tools, and other services so it can do more than just write code. Install them with the /install-plugin command inside Claude Code. Adding these now means Claude has access to up-to-date docs and better design output from the very first step.

Context7

Context7 gives Claude access to the latest documentation for any library or framework. Instead of relying on training data that might be outdated, Claude pulls the current docs in real time.

/install-plugin context7

Once installed, Claude automatically fetches docs when you ask about a library. For example:

> How do I add a new page in React Router v7?
  Use the route() helper in app/routes.ts...

> How do I set up a contact form with Netlify Forms?
  Add data-netlify="true" to your form element...

This matters because libraries update constantly. Context7 means Claude always gives you answers based on the latest version, not something that changed six months ago.

Frontend Design

The frontend-design plugin helps Claude build polished, distinctive interfaces. Without it, AI-generated sites tend to look generic. With it, Claude produces production-grade designs with real attention to typography, spacing, and visual hierarchy.

/install-plugin frontend-design

Step 3: Scaffold Your Project

Now you'll create a new website project. We'll use React Router with a Netlify template — this gives you a modern site with page routing, a development server, and everything you need to deploy later. Run this in your terminal:

npx create-react-router@latest --template netlify/react-router-template

Follow the prompts — you can accept the defaults. Then move into your new project and install dependencies:

cd my-site
npm install

Start the dev server

Start the dev server so you can see your site in the browser:

npm run dev

Open http://localhost:5173 in your browser. You should see the default welcome page. Your project files are in the app/ folder — that's where you'll do most of your work. Keep this dev server running — it updates live as you make changes. Open a second terminal tab for the commands in the next steps (on Mac, press Cmd+T in Terminal; on Windows, click the + tab in PowerShell).

Step 4: Plan Your Site

Before you start building, take a few minutes to decide what your site needs. You don't need a detailed plan — just enough to give Claude Code clear direction. Think about:

• What pages do you need? (Home, About, Contact, Services, etc.)
• What should each page say?
• What's the feel? (Minimal, colorful, professional, playful?)
• Any sites you like the look of? (Great for reference when prompting.)

You can even do this planning inside Claude Code. Open it in your second terminal tab and have a conversation:

cd my-site
claude

Then try something like:

I'm building a portfolio site for a photographer. I need a home page, an about page, and a contact page. I want it minimal and elegant. Help me plan what should go on each page.

The more specific you are about what you want, the better Claude Code will build it in the next step.

Step 5: Build Your Site

With Claude Code running in your project, start building. Use the plan from Step 4 and describe what you want:

Create an about page with my name, a short bio, and a link back to the home page

Check your browser — you should see the new page right away. Keep going:

Add a contact page with a form for name, email, and message

And another:

Change the homepage heading to "Welcome to My Site" and make the background a light gray

If you installed the frontend-design plugin in Step 2, use the /frontend-design command to get polished, distinctive designs:

/frontend-design Build me a landing page for my photography business with a minimal, elegant feel

Be descriptive about the style you want. Mention sites you like, the mood you're going for, and any specific requirements like mobile responsiveness or accessibility. The more context you give, the better the result.

Step 6: Set Up Git and GitHub

Now that you've built something worth saving, set up version control. Git tracks every change you make so you can undo mistakes and see your project's history. GitHub stores your code online — and it's how Netlify will deploy your site in Step 8.

You'll need two things:

• Git — already installed on Mac and Linux. Windows users, download it from git-scm.com
• A GitHub account — free at github.com

In your second terminal tab, make sure you're in your project folder and initialize a git repo:

cd my-site
git init
git add .
git commit -m "initial project setup"

Now create a new repository on GitHub. Go to github.com/new, name it my-site, and leave it empty (no README, no .gitignore). Then connect it and push — replace YOUR-USERNAME with your GitHub username:

git remote add origin https://github.com/YOUR-USERNAME/my-site.git
git push -u origin main

This is a one-time setup. From now on, saving your work is just git add, git commit, git push.

Step 7: Test and Audit with Playwright

Before you deploy, make sure your site actually works. Playwright is a testing tool that opens a real browser and clicks through your site automatically — checking that pages load, links work, and nothing is broken.

Install Playwright in your project:

npm install -D @playwright/test
npx playwright install

The first command adds Playwright to your project. The second downloads the browsers it needs to run tests — Chromium, Firefox, and WebKit.

Writing tests with Claude Code

You don't need to learn Playwright's syntax — Claude Code can write tests for you. With your dev server running, open Claude Code and ask:

Write Playwright tests that check:
- the homepage loads and has the right title
- all navigation links work
- the contact form is visible and has all fields
- no pages return a 404

Claude will create a test file and run it for you. You'll see output like:

npx playwright test

Running 4 tests using 1 worker

  ✓ homepage loads with correct title (1.2s)
  ✓ navigation links work (0.8s)
  ✓ contact form has all fields (0.6s)
  ✓ no pages return 404 (0.9s)

  4 passed (3.5s)

Auditing accessibility

You can also ask Claude Code to audit your site for accessibility issues — things like missing alt text, low contrast, or elements that can't be reached with a keyboard:

Write a Playwright test that audits each page for accessibility issues using @axe-core/playwright

Claude Code will install the @axe-core/playwright package and write a test that scans every page for WCAG violations. Fix any issues it finds — it's the easiest way to make sure your site works for everyone.

Step 8: Deploy to Netlify

Deploying means putting your site on the internet so anyone can visit it. You'll need a free Netlify account. Since your code is already on GitHub from Step 6, connecting to Netlify only takes a minute.

First, make sure all your latest changes are saved to GitHub. If you've made changes since your last commit:

git add .
git commit -m "build out site pages"
git push

Then go to app.netlify.com, click "Add new site," and connect your GitHub repo. Use these build settings:

Build command: npm run build
Publish directory: build/client

Netlify will build and deploy your site. You'll get a URL like your-site-name.netlify.app immediately. You can add a custom domain later in your site settings.

Your site is live. Share the link — you just built and deployed a website from scratch.

Step 9: Update and Maintain Your Site

Every time you push to GitHub, Netlify automatically rebuilds and deploys your site. This is the workflow you'll use from now on.

Opening your project

When you come back to your project after closing the terminal, open a new terminal and navigate to your project folder:

cd my-site
npm run dev

That starts the dev server again. Open http://localhost:5173 to see your site locally.

Making changes

You can edit files directly, or open Claude Code in a second terminal tab to make changes for you:

# In a second terminal tab:
cd my-site
claude

> Change the phone number on the contact page to 555-1234

> Add a new project to the work page called "My New Project"

Pushing updates live

Once you're happy with your changes, run your tests, then save and push to GitHub. Netlify will redeploy automatically — your site updates in about a minute:

npx playwright test
git add .
git commit -m "update contact info"
git push

Working from a different computer

As long as you've committed and pushed your work to GitHub, your code is saved — even if you delete the folder from your computer. If you're on a new machine (or just need a fresh copy), go to your repository on GitHub, click the green Code button, make sure HTTPS is selected, and copy the URL. Then open a terminal and run:

git clone YOUR-COPIED-URL

Then move into the project and install dependencies:

cd my-site
npm install

That gives you a complete copy of your project, ready to go. Start the dev server with npm run dev and pick up right where you left off.

If something goes wrong

If npm run dev gives you an error, try running npm install first — this fixes most issues. For anything else, open Claude Code and describe the problem. It can read your error messages and help you fix them.

Want Help?

Not sure where to start? Book a consultation and we'll figure out your plan together:

• One-on-one consultation — $50/hr

Or if you'd rather have someone handle the whole thing, I build sites too:

• Basic site (up to 5 pages) — $500
• Complex site (custom features, e-commerce, etc.) — $1,500
• Custom application (mobile apps, AI agent systems, etc.) — starts with a consultation

Get in touch