This Is Bigger Than a Website
Not long ago, building a website, writing software, or automating repetitive work required years of training. You needed to know how to write code, configure servers, understand programming logic, and navigate a dozen technical disciplines that took professionals years to master. If you weren't a developer, you either paid one, waited on one, or simply went without.
That world no longer exists.
AI has collapsed the gap between "I have an idea" and "it's done" from years to hours. Tools that once required a computer science degree can now understand plain English. You don't describe what you want in code anymore — you just describe what you want, and the machine figures out the rest. This is not a small incremental improvement. This is a fundamental shift in who gets to build things, automate things, and create things.
"The most powerful technology in history is now operated by describing what you want out loud. The barrier to entry has never been lower — and the ceiling has never been higher."
This project starts with a website — but that's just the doorway. The same skills and tools you use here apply directly to building software, creating apps, automating tasks you do every day at work, processing data, generating reports, writing scripts that save you hours a week, and solving problems in your business or personal life that used to require a specialist. Once you understand how to work with AI as a creative and technical partner, almost nothing is off limits.
Think about the things in your daily work that eat up your time — the repetitive emails, the spreadsheets you update manually, the documents you reformat every week, the data you copy from one place to another. All of that can be automated. Not someday, not with a team — now, by you, with the same tools you're about to use for the first time in this project.
Build and publish anything online — a personal site, a portfolio, a business page, a passion project — without hiring a developer or learning to code.
Build custom software, apps, and internal tools for your business — things that would have cost tens of thousands to commission from a development agency.
Automate the repetitive work that fills your week — reports, emails, data entry, document processing — and reclaim hours you'll never get back otherwise.
The people who thrive in the next decade won't necessarily be the ones who know the most code. They'll be the ones who know how to think clearly, communicate precisely, and use AI to execute at a level that would have required a full team just a few years ago. That's exactly what you're going to practise here.
By the time you finish this project you will have used professional developer tools, published something real to the internet, and understood how to direct AI as a co-builder. That foundation carries forward into everything. This is not a small to-do list. This is where it starts.
The Tools You'll Use
You'll be working with five tools. Here's what each one actually is, why it matters, and why you're using it — in plain English.
Used by virtually every software developer and tech company on the planet.
Git is the underlying system that tracks changes to your code. Think of it like "track changes" in a Word document — every time you save a version, Git remembers exactly what changed, when, and why. GitHub, GitHub Desktop, and Claude Code all rely on Git running in the background. You won't interact with it much directly, but it needs to be installed on your computer before anything else will work. You'll install it in Step 00 below.
Home to over 100 million developers. Where the world's software is built and stored.
Think of GitHub as Google Drive for code — it stores your project online, backed up and version-controlled, accessible from anywhere. It's the same platform that companies like Google, Microsoft, and Apple use to manage their software. You'll learn how it's structured in Part 01.
The bridge between your computer and the world's most important software platform — without the complexity.
GitHub Desktop is a visual app that makes saving to GitHub easy. Without it, you'd have to type complex commands in the terminal to save your work. GitHub Desktop gives you buttons and a simple interface to do the same thing. When you're done with a chunk of work, you open it, write a short note about what you did, and click "Commit." It means you can work like a professional developer without needing to memorise anything.
That said — Claude Code can actually handle all of this for you too. You can ask it to commit your changes and push them to GitHub directly from the terminal, and it will write a sensible commit message while it's at it. Many developers skip GitHub Desktop entirely for this reason. Either way works, and it's genuinely worth understanding how the commit and push process works — but don't feel like you have to use the visual app if Claude Code is already open and ready to go.
One of the most capable AI coding tools ever built. Used by developers at some of the world's leading companies.
Claude Code is an AI assistant that lives in your Terminal (Mac) or Windows Terminal (Windows) and writes code for you. You describe what you want in plain English — "add a contact section with my email and Instagram link" — and it writes and edits the actual files. It's like having a senior developer sitting next to you who never gets tired, never judges your questions, and can build almost anything you can describe. You're still in charge: you give it direction, review what it makes, and tell it what to change.
Note: Claude Code requires a paid Claude Pro or Max plan (claude.ai/upgrade). The same account you use on the Claude website works — no separate signup needed.
Trusted by over 3 million developers and businesses to put their work on the internet. Free to start.
Netlify is the service that puts your website on the internet. Right now your site is just files sitting on your laptop — invisible to the world. Netlify connects to your GitHub, takes those files, and gives them a real public URL that anyone can visit from anywhere. Every time you push an update to GitHub, Netlify automatically updates the live site within seconds. No server knowledge needed, no technical setup — it just works.
Git Commands You Should Know
Git is controlled by typing short commands in the Terminal (Mac) or Windows Terminal (Windows). There aren't many you need to know for this project — here are the essential ones explained in plain English.
So rather than typing
git add . && git commit -m "stuff", just tell Claude Code: "Look at what I've changed and commit it with a proper message." It'll handle the staging, write a descriptive message, and confirm what it did. You stay focused on building — not on memorising syntax.
git init
Sets up a brand new Git project in a folder. Tells Git "start tracking everything in here."
git status
Shows you what's changed since your last save. Green = ready to save. Red = changed but not staged yet.
git add .
Stages all your changes — tells Git "include everything that changed in my next save." Always comes before git commit.
git commit -m "message"
Saves a snapshot of your work with a short note describing what changed. The most important command you'll use repeatedly.
git push
Uploads your saved commits from your laptop to GitHub. Until you push, your commits only exist locally. Pushing triggers Netlify to redeploy automatically.
git log
Shows the full history of all your commits — who made them, when, and what the message was. Useful for checking your commit history before submitting.
Install Git on Your Computer
Git is the foundation everything else runs on. Before you can use GitHub, GitHub Desktop, or Claude Code, Git needs to be installed on your machine. Windows users should also install Windows Terminal — a much better terminal than the default options. This only takes a few minutes and you'll never need to do it again.
Windows Terminal is Microsoft's modern terminal app — it's clean, fast, and works properly with Claude Code. It replaces the old Command Prompt and PowerShell windows with something much better. You'll use it for everything in this project.
Open the Microsoft Store (press Windows key, type "Microsoft Store", hit Enter), search for Windows Terminal, and click Install. It's free and made by Microsoft.
If you already have it, you're good — skip this. You can check by pressing Windows key and typing "Terminal" — if it appears, it's installed.
Mac: Press
Cmd + Space, type "Terminal", hit EnterWindows: Press
Windows key, type "Terminal", hit Enter — this opens Windows Terminal
git --versionIf a version number appears (e.g.
git version 2.39.0), Git is already installed — skip to the next part. If it says "command not found" or "not recognised," continue to step 3.Mac: Click "Download for Mac" and run the installer
Windows: Click "Download for Windows," run the
.exe file, and click through using all default options. This installs Git and Git Bash in the background — Git is required for version control to work.Once done, go back to step 2 to confirm it worked.
Create Your GitHub Account & Repository
GitHub is where your project will live online — but it's worth understanding what it actually is before you sign up, because it's far more than just a place to store files.
Everything on GitHub lives inside an account, and inside that account you create repositories — one per project. A repository (or "repo") is just a folder for a project that GitHub tracks and version-controls. Your account is your identity on the platform, visible at a URL like github.com/yourname.
There are two types of accounts:
Belongs to one person. You create repos under your own name. Great for personal projects, portfolios, and learning. This is what you'll create today. Free forever.
Belongs to a team or company. Multiple developers can be invited as members with different roles and permissions. Repos sit under the org name — e.g. github.com/yourcompany. Used by every tech company in the world.
A personal account can also belong to organisations — so a developer might have their own personal repos and also be a member of their employer's org, their open-source project's org, and a side project's org, all from the same login.
A repo is a project folder with superpowers. It holds all your files, but also the complete history of every change ever made — who changed what, when, and why. You can go back to any point in time, see exactly what was different, and restore any previous version. For a solo project this is a safety net. For a team, it's what makes collaboration possible without everyone overwriting each other's work.
Repos can be public (visible to everyone on the internet — useful for sharing work or building a portfolio) or private (only you and invited collaborators can see it). For this project, either is fine.
GitHub is how the world's software gets built together. A few things worth knowing even at this stage:
Collaborators — you can invite anyone to a repo and give them read or write access. They can work on the same project from their own computer, push their changes, and everything stays in sync.
Branches — instead of everyone working on the same files simultaneously, developers create separate "branches" — parallel versions of the project. Work gets done in isolation, then merged back in when it's ready. This is how large teams ship code daily without chaos.
Pull Requests — when someone finishes work on a branch, they open a Pull Request — essentially saying "I'd like to merge my changes in." Other team members can review, comment, request changes, and approve. It's the standard review process used everywhere from small startups to companies like Google and Netflix.
If you're working solo, none of this ceremony is needed. You skip the branch entirely and just commit your changes directly, then push straight to main. No PR, no review, no approval — your changes go live immediately. That's exactly what you'll do in this project.
There are two common ways to get a Git repository onto your computer. It's worth knowing both, even though you'll only use one for this project.
You create the repository on GitHub's website, then clone it down to your computer. Cloning downloads the repo into a folder and automatically links it back to GitHub — so pushing your changes later is seamless.
This is the most common approach for new projects and the one you'll use in this guide. It keeps everything in sync from the very first commit.
You already have a folder of files on your computer. Open a terminal from inside that folder — on Mac, right-click the folder and choose "New Terminal at Folder"; on Windows, right-click inside it in File Explorer and choose "Open in Terminal" (this opens Windows Terminal pointing at that folder). Then launch Claude Code and just ask it: "Initialise a git repository here, create a new repo on GitHub called my-project, and push everything up." It will run git init, connect to GitHub with git remote add origin, and push — without you needing to type any of it. Claude Code doesn't require git to already be set up before it launches; it works in any folder.
Common when you've started working locally before thinking about version control. A little more setup, but gets you to the same place. Claude Code can walk you through this if you ever need it.
For this project: use Option A. Create the repo on GitHub first, then clone it. The steps below walk you through exactly that.
For this project you're working solo with a single repo on a personal account — the simplest possible setup. But you're using the exact same platform and workflow that professional development teams use every day. Let's get it set up.
Repository name: something clean like
my-website or yourname-siteVisibility: Public or Private — your choice. Private means only you can see it.
Important: Check the box that says "Add a README file" — this makes cloning easier in the next step.
Then click "Create repository".
Download GitHub Desktop & Clone Your Repo
"Cloning" means downloading a copy of your GitHub repository onto your computer so you can work on it locally. GitHub Desktop makes this simple with a visual interface.
GitHub Desktop will ask where to save the folder on your computer. The default location is fine — just remember it.
README.md file inside it.Install Claude Code & Scaffold the Project
Claude Code now has a native installer — one command and it's done. Just copy, paste, and hit Enter.
Don't have a plan yet? Ask Doug if he has any free trial passes left — he may be able to get you started without paying upfront.
Step 1 — Install Claude Code
Open Terminal (Cmd + Space, type "Terminal", hit Enter), then paste this and hit Enter:
curl -fsSL https://claude.ai/install.sh | bash
That's it — nothing else to install first.
Git should already be on your machine from Part 00. Open Windows Terminal: press Windows key, type "Terminal", hit Enter. Then paste this and hit Enter:
irm https://claude.ai/install.ps1 | iex
After it finishes, close and reopen your terminal before continuing.
claude --version and hit Enter. If you see a version number, you're good to go.
Step 2 — Log In on First Launch
claude --dangerously-skip-permissions and hit Enter./exit to close it for now.Step 3 — Open Your Project & Start Building
Mac: In the top menu click Repository → Open in Terminal
Windows: In the top menu click Repository → Open in Windows Terminal
claude --dangerously-skip-permissionsThe
--dangerously-skip-permissions flag lets Claude create, edit, and delete files without stopping to ask for approval every time. For a self-contained project like this, it's safe and makes the workflow much smoother."Create an index.html, styles.css, and an empty assets/ folder for my website. Use plain HTML and CSS only — no frameworks."Why plain HTML/CSS? Tools like React or Vue require extra setup and a whole new syntax to learn. Plain HTML and CSS open directly in any browser with zero configuration. Claude Code can still build you something polished and professional with just these two files.
1. Write chore: initial site scaffold in the commit message box at the bottom left
2. Click "Commit to main"
3. Then click "Push origin" in the top bar — this uploads it to GitHub
/styles.css
/assets/
Build a Single-Page Responsive Website
This is your site — it can be about anything. There are no wrong answers here. Pick something you genuinely care about and build around that. The structure is the same regardless of the topic — only the content changes.
Your site needs sections that make sense for your topic. Below are some starting points — use them as a guide, not a rigid rule.
Hero
A title, a one-line description of what the site is about, and a button that pulls people in — e.g. "Explore," "Read More," "Listen Now"
Introduction / About
3–6 sentences introducing the topic or yourself — whatever sets the scene
Main Content
The heart of the site — could be a portfolio, a music player, a gallery, a list of trails, your top 10 birds, anything
More / Updates
Upcoming events, latest posts, new additions, or a "what's next" section
Media
3–6 photos, an embedded video, or a gallery of images related to your topic
Contact / Connect
An email address and at least 3 links — social media, a forum, a community, or wherever people can find more
Footer
Your name or brand, a copyright line, location, and quick navigation links
Technical Requirements
Commit History
As you build, try to save your progress in stages rather than one big lump at the end. A rough guide is around 6 commits — one per section or chunk of work. Don't overthink the messages; Claude Code can write them for you. Below are some examples for different site types to give you an idea of the rhythm.
Test Before You Ship
Before deploying, check that everything looks right in the browser. Here's exactly how to do that.
Your own laptop can pretend to be that server. When it does, it uses the address
localhost — which just means "this computer, right here." So instead of visiting yourname.netlify.app, you visit localhost in your browser and see the same site, running locally.For plain HTML files like yours, you don't even need to set up a local server — you can just open the file directly in a browser and it will look almost identical to how it'll appear once published. The browser reads your HTML and CSS files the same way a real server would send them. So what you see locally is what people will see live.
How to open your site locally
Cmd + R on Mac or Ctrl + R on Windows) to see the updated version.How to check mobile view
F12 on Windows / Cmd + Option + I on Mac). This opens the developer tools panel.Final checks
Deploy to Netlify
Netlify will take your GitHub repository and turn it into a live website with a real URL. Every time you push new changes to GitHub, Netlify will automatically update the live site — you don't have to do anything extra.
random-name-123.netlify.app. Click it to see your live site. You can rename it in Site settings → Domain management.Final Submission
GitHub URL
Link to your repository (shared privately if needed)
Live Site URL
Your Netlify deployment link
Reflection
5–10 sentences on how you used Claude Code, what you changed, challenges, and what you'd improve