Come back any time
We'll email you a link to pick up exactly where you left off.
FOUR WEEKS.
ONE WORKING TOOL.
YOURS.
The AI writes the code. You direct what gets built, verify what ships, and end the month with a deployed tool you actually understand. No prior coding experience assumed — just the patience to follow along and the honesty to check your own work as it builds.
Enter your email to unlock BUILD.
What you'll have by the end of Week 4
Environment
Your foundation. Editor, terminal, version control, your first live website.
Personalise your BUILD course
The 23 segments are identical either way. Personalised retunes every example, case study, quiz feedback, and AI–coach reply to your role and sector. Pick once, then run the course.
How This Course Actually Works
AI Clarity teaches the human overlay — the verification, judgement, and refusal AI can't do for itself — so you can direct AI safely instead of being directed by it. The AI writes the code. Your job is to know enough about the systems underneath that you can spot when AI is confidently wrong, and step in before it costs you.
In 4 weeks you'll have a deployed AI tool you own, and the verification habits to keep building safely without us.
Why "Trust the AI" Isn't a Strategy
These aren't edge cases. They happen to developers with years of experience. They'll happen to you. Knowing they exist is the protection.
The One Rule That Runs This Course
This rule doesn't slow you down. It's the difference between shipping once and shipping well every time after that.
Your Four AI Working Modes
When Vibe Coding Works — and When It Kills You
- Throwaway prototypes and experiments
- Learning — when you're reading every line
- Internal tools with a tiny, trusted user base
- Greenfield features where bugs are recoverable
- Boilerplate you'd write identically anyway
- Real users with real data at stake
- Anything involving money or payments
- Regulated sectors: legal, medical, financial
- Code you can't explain when it breaks
- Authentication and permission systems
Every segment from here on assumes that frame.
What You Need · How to Get Unstuck
This course is self-paced. No live sessions, no Discord, no instructor on call. That works only if you know (a) the hardware and accounts you need before Segment 2, and (b) exactly what to do when something breaks. Both live on this slide. Come back to it any time you're stuck.
- A laptop or desktop — not a Chromebook, iPad, or phone (they can't run the dev tools)
- At least 8 GB RAM, 10 GB free disk
- Admin rights to install software
- Stable internet — downloads total ~2 GB across the course
- Windows 10 or newer
- macOS 12 (Monterey) or newer
- Linux — Ubuntu 20.04+ / Fedora / similar is fine
- On corporate machines: check your IT team allows VS Code, Node, Git installs — some block them
npm install, pip install, and raw GitHub clones. If a download hangs or returns "certificate" / "ECONNREFUSED" errors, you're behind a proxy. Easier fix than wrestling with it: do the course on a personal machine, or tether to your phone's hotspot for the install steps. Ask Claude: "I'm on a corporate network and npm install is failing with [error]. What's the minimum config to make it work?"Win+Shift+S on Windows, Cmd+Shift+4 on Mac.sudo rm, curl … | bash, or you don't understand what it does, ask "what does this actually do?" before pressing enter.Ctrl+D (Windows) or Cmd+D (Mac) right now so you can jump back here from any segment when something breaks.By the end of this segment you will be able toSee exactly what you will have built by Week 4 and understand the four working modes you will use to direct AI throughout the course.
What You're About to Build
Before we start, a word on what this course can and cannot deliver. If you commit to the four weeks, the likely outcome is a live website by the end of Week 1 and a working AI-powered tool you've built and deployed by the end of Week 4 — along with the verification habits that let you keep building safely after the course ends. What you get out of it depends on the work you put in. The course gives you the structure and the patterns; the practice is yours.
If you did SHARP Every Week-4 segment maps directly to a pattern you learned to read.
S22 Error Handling
S23 API Key Security
S24 Testing
S25 StreamingShowing AI responses word by word as they arrive, instead of waiting for the whole answer.
"If AI can write code, why am I learning to build?"
Good question. Here's the answer: you're not learning to become a software developer. You're learning to build AI-powered tools that work for you. The people who understand how these systems connect — how APIs work, how to orchestrate multiple AIs, how to deploy and maintain tools — are the people who control AI instead of just using it.
In 2026, companies aren't looking for people who can write code from memory. They're looking for people who understand technology well enough to guide it, question it, and build with it. That's what this course teaches. In 4 weeks.
Before you touch a keyboard, see where you're going. By Week 4, you will have built, deployed, and own all three of these:
Right. That's the destination. Now let's start the journey. It begins with an editor — the place where you'll write every line of code for the next four weeks. It's free, it takes five minutes to install, and it's the same editor most professional developers use. Let's go.
No AI-specific focus
No production deployment guidance
No sector application
No verification pedagogy
Self-directed, easy to quit
Multi-model orchestration
Verification layer baked into every segment
Deployed and live by Week 2
Sector-specific applications
Self-paced with clear checkpoints
Here's everything you'll learn, and how it connects. The lit box shows where you are now. This diagram updates every segment — you'll always see your position in the system.
This Week: Your Environment (Segments 1-7) What you're about to build: VS Code → terminal → Git → Node & Python → hosting → your first live website. ~8–10 hours.
Before the next segment, do this one thing: right-click anywhere on this page and click "Inspect" (or press F12). A panel will open showing the code behind this page. Every element you see — every colour, every animation, every card — is made from HTML, CSS, and JavaScript. That's exactly what you're about to learn to build.
Look at the code for 30 seconds. It will look like gibberish right now. In 2 weeks, you'll be directing AI to write code like that — and you'll understand enough to spot when it's wrong.
You're not learning to code. You're learning to direct AI to code — and to verify what it produces.
That distinction matters. A traditional coding course teaches you to type code from memory. By the end you'd be a junior developer. That's a two-year commitment, and in 2026, it's no longer the right investment for most people. AI writes most production code now. The economic value has shifted.
What this course teaches instead: how to read code well enough to direct AI toward the right thing, spot when it produces the wrong thing, and ship the result safely. Every segment from here on assumes that frame — you're not typing from memory, you're guiding AI and verifying every line before it goes live.
- A computer-science degree
- An exhaustive JavaScript / Python tutorial
- A promise you'll never need help again
- A replacement for reading when it matters
- A working AI tool you ship in 4 weeks
- The verification habits to keep building safely
- The 20% of code knowledge that covers 80% of what AI hands you
- A foundation you own — the tool, the habits, the understanding
Coming from SHARP? How the 7 machine patterns carry into your AI pair-programming — same methodology, different surface.
Everything you learned about the 7 machine patterns applies to your own pair-programming now. AI will agree with your code (M1), confidently invent API endpoints that don't exist (M4), and tailor explanations to match how you talk instead of telling you what's actually true (M3). The same questions you asked in SHARP — "How do you know this?" and "Can you verify this in a fresh session?" — are now the questions you ask while you're writing code. The methodology doesn't get left behind. It comes with you.
Segment 1 — What you mastered
- The 4-week shape of BUILD and what ships at the end
- Where this course sits in the AI Clarity ladder (CLEAR → SHARP → BUILD → SCALE)
- Why the verification layer is the entire pedagogy
- When to reach for voice notes vs Claude desktop vs Claude Code vs mobile
Quick recall — Segment 1
Segment summary · Seg 1 · What You're About to Build
You know what you're building and why. Execution starts now.
- Every tool you build lives on a real URL — not localhost
- VS Code, Terminal, Git, GitHub, Cloudflare — your five foundation tools
- You own the code. You own the deployment. That's the difference.
- BUILD is not tutorials you follow — it's a system you build and keep
Set Up Your AI Workspace — Once
You're going to set up your AI workspace once. Then you use it for every segment in this course — and for the rest of your career. The tools below aren't optional extras. They're the working environment this course was built around.
Install Claude Desktop + Claude Code
claude.ai/download. Download the desktop app for your OS. Sign in with your Claude account. This is your main AI review interface throughout the course.npm install -g @anthropic-ai/claude-codeclaude --version should return a version number.CLAUDE.md. Paste the template from the next slide. This file tells Claude Code the rules it operates under for your project.Your AI Workspace Diagram
Your CLAUDE.md Template
CLAUDE.md is a file Claude Code reads automatically when you start a session in your project. It sets the rules AI operates under. Paste this template, then customise as needed:
# Project Rules for Claude Code ## The One Rule Every line you write gets a human eye before it ships. Every command you suggest, I read first. Every package you recommend, I verify exists. ## Hard Limits - Never run `rm -rf` without explicit, typed confirmation from me - Never hardcode secrets, keys, or tokens in any file - Never install packages without listing what they do first - Never suggest overwriting files without showing me the diff - If you are unsure about something — say so. Confidence without basis is worse than admitted uncertainty. ## Project Context - Stack: HTML, CSS, JavaScript, Cloudflare Workers - Deployment: Netlify (frontend) + Cloudflare (API layer) - API keys: stored in Cloudflare env vars only — never in code ## Working Style - Show me one step at a time - After each step, tell me what to verify before moving on - If I ask "what does this do?" — explain it to me before I run it
By the end of this segment you will be able toHave VS Code installed with the four extensions you need, the five settings that matter, and Claude Desktop + Claude Code wired into your workflow.
Setting Up VS Code
▸ 30-second preview — where you're headingPicture this: you type a question into a text box on your website.
VS Code is your editor — where you'll write everything. It's free, it runs on any operating system, and it's what most developers actually use day-to-day. By the end of this segment you'll have it installed, configured with four essential extensions, and set up with five beginner-friendly defaults. It takes about 20 minutes and you only do it once.
If you've used Sublime, Atom, or Notepad++ before and you're wondering why you should switch — VS Code has the best support for the tools we'll use throughout the course (live preview, terminal integration, git tracking), and all the code-along screenshots in BUILD use its interface. You'll save time by using the same editor the course shows.
A note on tools — your choice matters more than ours
This course uses VS Code, GitHub, Netlify, and Cloudflare Workers because they're free, beginner-friendly, and work well together. But they're not the only options. If you already use or prefer any of these alternatives, the concepts are identical — only the interface differs.
The stack diagram is your map for the whole course — it updates every segment and shows you where you are in the system you're building. Think of it like a game minimap: you don't always need it, but when you get lost, glancing at it tells you instantly what you've already built and what comes next.
In Segment 1 you did the "Understanding" box — you saw the stack end-to-end before touching anything. Now you're lighting up the "VS Code" box, the editor that will hold every line of code you write for the next four weeks. After that comes the terminal, then git, then Node and Python, then hosting — one box per segment, until the whole row is solid.
code.visualstudio.com/download and tell me which checkboxes to tick." Then verify each step before clicking. From here on, AI is your install partner — you read, you verify, you ship.Picture this: you type a question in a text box on YOUR website. You hit Send. Three seconds later, Claude's response appears below it. You wrote every line of that code in the editor you're about to install. That's Segment 11. This segment gets you the workspace.
VS Code is your editor — where you'll write everything. It's free, it runs on any operating system, and it's what most developers actually use day-to-day. By the end of this segment, you'll have it installed, configured, and ready. This takes about 20 minutes and you only do it once.
.exe installer. Accept all defaults. Check "Add to PATH" when prompted — this is important..dmg file. Drag VS Code into your Applications folder. Open it once from Applications.• Windows: Try running the installer again as Administrator (right-click → Run as administrator)
• Mac: If it says "unidentified developer," go to System Settings → Privacy & Security → click "Open Anyway"
• Still stuck? Post in the course discussion with a screenshot of the error
Extensions add superpowers to VS Code. We'll install exactly 4 — no more, no less. These are the ones that matter for everything we'll build.
- Press Ctrl+Shift+X (or Cmd+Shift+X on Mac) — the Extensions panel opens on the left
- Type the extension name in the search box at the top
- Click the first result (check the author name matches below)
- Click Install — if a "Trust Publisher" dialog appears, click Trust Publisher & Install
- Repeat for each extension
- When all 4 are installed, close VS Code completely and reopen it — some extensions need a restart to activate
Can't find "Open with Live Server" after installing? Look at the bottom-right of VS Code for a Go Live button in the blue status bar. Click that instead. If neither appears, restart VS Code one more time.
To get back to your files after installing: Click the Explorer icon — the top icon in the left sidebar (looks like two stacked files). Your folder and files will appear.
index.html but Windows added .txt on the end, making it index.html.txt. If your page shows a file listing instead of your website, this is why. Fix: In VS Code, right-click the file → Rename → remove the .txt so it ends in just .html. Always check the file type dropdown says "HTML" when saving.▶ Step-by-Step Walkthrough (click to expand)
SHARP M3 The Tailored Response.AI will happily adapt its suggestions to whatever 'sophisticated' language you use.
▸ Try it now · 2 minOpen your terminal and verify your install.
code --version and press Enter. You should see three lines of version info. If you get 'command not found', open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P), type 'shell command', and select Install 'code' command in PATH. Re-test.• Make sure you're searching the exact name (e.g., "Live Server" by Ritwick Dey)
• If the Install button is greyed out, try restarting VS Code
• Check your internet connection — extensions download from Microsoft's servers
VS Code has hundreds of settings. We'll change exactly 5. These are the ones that make the biggest difference for new developers — based on what the most successful coding courses recommend in 2026.
Press Ctrl+, (comma) to open Settings. Use the search bar at the top to find each setting:
afterDelayYour files save automatically. You'll never lose work because you forgot to press Ctrl+S.
Prettier automatically tidies your code every time you save. Clean code, zero effort.
onLong lines of text wrap instead of scrolling off screen. Much easier to read.
Matching brackets get the same colour. Helps you see where blocks of code begin and end.
Dark+ or any dark theme you likeEasier on the eyes during long sessions. Most developers use dark themes — and all our examples use dark backgrounds.
Five settings, no more. I promise I won't make you configure anything else for at least two more segments.
VS Code has 5 main areas. You don't need to memorise them — just know they exist so nothing surprises you.
VS Code now has AI coding assistants built in — GitHub Copilot being the most popular. These tools suggest code as you type, and they can be genuinely helpful.
Some courses tell you to disable them entirely for learning. We disagree — but with a condition.
If you completed CLEAR or SHARP, you already know the patterns: AI agrees with you, AI sounds confident without basis, AI calibrates to what you want. The same patterns apply to code suggestions. Copilot will suggest code that LOOKS right. Your job — the same job from the earlier courses — is to understand what it's suggesting before you accept it. Use it. But verify it. Same principles. Different context.
Ctrl+Shift+P — Command Palette (find anything)
Ctrl+Shift+X — Extensions panel
Ctrl+, — Settings
Ctrl+` — Terminal (next segment!)
Segment 2 — What you mastered
- VS Code installed, signed in, theme picked
- Live Server, Prettier, GitLens, HTML CSS Support extensions added
- Auto Save, Format On Save, Word Wrap, Bracket Pair Colors, Font Size configured
- Claude Desktop installed and your CLAUDE.md template in place
Quick recall — Segment 2
Segment summary · Seg 2 · Setting Up VS Code
Your editor is configured. You can read, write, and navigate code.
- VS Code is where all your code lives — extensions make it smart
- The file explorer, editor pane, terminal panel — three areas, one tool
- Extensions: Prettier (format), ESLint (catch errors), Live Server (preview)
- Keyboard shortcuts: Ctrl+` (terminal), Ctrl+Shift+P (command palette), Ctrl+S (save)
By the end of this segment you will be able toRun eight terminal commands fluently, recognise the dangerous ones AI might suggest, and have the muscle memory to refuse a destructive command before running it.
The Terminal — It's Just a Text Box
▸ 30-second preview — where you're headingIn a terminal you type three characters: pwd (what directory am I in?), ls (what's in here?), cd (move into...
pwd (what directory am I in?), ls (what's in here?), cd (move into a folder). That's 80% of what professional developers do all day. By the end of this segment those three commands will feel as normal as Ctrl+S.The terminal is the part of the course that trips beginners up most often — not because it's hard, but because it looks hostile. A black box. A blinking cursor. No icons, no menus, no "Are you sure?" dialogs. That's the first thing to fix: the terminal is just a text box where you type a command and press Enter. Nothing more.
Throughout Week 2 and the rest of the course you'll use the terminal to run servers, pushUpload your local commits to GitHub. Makes your code available in the cloud. code to GitHub, install packages, and deploy. Every step is guided, every command is explained, and every error is survivable — the terminal has never broken anyone's computer by accident.
Read every command before you run it. This is the segment where the human-overlay rule first becomes critica…
AI will tell you to type things into your terminal. Some of those things are dangerous. The terminal does exactly what you tell it — there is no "are you sure?" dialog for most commands. Read every command before you run it. If it starts with
rm -rf, sudo, or curl ... | bash — stop and ask "what does this do?" in a fresh chat before running.
- Smart quotes —
"vs"and'vs'. Looks identical. Shells reject the curly ones. Chat apps, Word, and some PDFs convert your quotes silently. If you seesyntax errororunexpected tokenand your command looks right — this is usually it. - Invisible Unicode characters — non-breaking spaces, zero-width joiners. Copying from styled text can sneak these in. Fix: retype the command, don't paste.
- Line-ending mismatch (Windows only) — files edited in Notepad use
CRLF, shell scripts expectLF. If a script errors on the first line, this is why. VS Code fixes it: bottom-right corner, clickCRLF→ switch toLF.
Two boxes behind you (Understanding + VS Code), one box lighting up now (Terminal), and the rest of the stack waiting. The pattern of the course is the pattern of this diagram — one thing at a time, each one unlocking the next, none of them skippable.
The terminal is the box that earns the most fear and deserves the least. Every real developer uses it dozens of times a day, and none of them are inventing new syntax — they're running the same eight commands on different projects. Those eight commands are the ones you're about to learn.
Let's get this out of the way.
I'm going to be honest — the first time I opened a terminal I stared at it for about thirty seconds, typed nothing, and closed it. That blinking cursor felt like it was judging me. It wasn't. It was just waiting.
Here's what nobody tells beginners: if you type a wrong command, you get an error message. Nothing explodes. Nothing gets deleted. The terminal says "command not found" and waits patiently for you to try again. I typed a lot of wrong commands. My computer survived all of them.
The terminal is just a text box where you type instructions for your computer. You've been typing instructions into Google for years — this is the same concept, pointed at your own machine instead of the internet.
Remember the shortcut we previewed at the end of Segment 2? Now you'll use it for real.
You'll see a blinking cursor after some text. On Windows it might say PS C:\Users\YourName>. On Mac it might say yourname@MacBook %. Don't worry about what it says — that text just tells you where you are on your computer.
• Try the menu: View → Terminal
• Make sure you're pressing the backtick key ` not the single quote '
• If the terminal opens but shows an error, try: Terminal → New Terminal from the menu
Type this exact nonsense into your terminal and press Enter:
▶ Step-by-Step Walkthrough (click to expand)
asdfghjkl
What happened? You got an error message — something like 'asdfghjkl' is not recognized or command not found: asdfghjkl. And then nothing. Your computer is fine. Your files are fine. The terminal just said "I don't understand" and waited for you to try again.
This is the most important lesson in this segment. This is the most important lesson in this segment. The terminal i…
rm (remove files permanently) — and we'll teach you exactly when and how to use it safely.The terminal has hundreds of commands. You need 8. Here they are, with a "try it now" exercise for each:
pwd
cd alone to see it.SHARP M7 The Fold.When you try a terminal command and it errors, and you paste the error into an AI, the AI will often instantly...
▸ Try it now · 1 minRun your first three commands.
pwd (where am I?) → ls (what's here?) → cd ~ (go home). If any feels mysterious, ask Claude: 'I just ran [command] and got [output]. What does this mean?'Your second essential command. ls answers "what's in here?". You'll type this several hundred times over the next four weeks until it becomes a reflex — every time you change folders, you'll instinctively run ls to see what's there.
ls
ls also works. Or use dir.cd is how you move around the file system without leaving your chair. It's the command-line equivalent of double-clicking folders in File Explorer or Finder — but faster, scriptable, and the same everywhere you'll ever deploy code.
cd .. to go back up one level.Before you create your first project folder, practise navigating into and out of existing folders. cd Desktop and then cd .. is the minimum drill — it proves you can move in, out, and back without getting lost.
cd Desktop
cd .. to go back. Works the same on all systems.Your first "creation" command. mkdir creates a new folder on your computer from the terminal — no right-click, no File Explorer, just one command. Every project you'll build in the rest of this course starts with this.
mkdir my-first-project
ls — you should see your new folder listed.touch creates an empty file. Together with mkdir and cd, these three commands are how you build up any project structure from the command line. Every repositoryA project folder on GitHub. Contains all your code files and their history. you create for the rest of the course starts with this trio.
touch index.html
ni index.html (New-Item) or echo $null > index.htmlThis is the single command that links your terminal work to your editor. When you want to open a project in VS Code, you don't go File → Open Folder — you just type code . from inside the project folder. It's the bridge between Segment 2 (editor) and Segment 3 (terminal).
. means "this folder." You'll use this every single time you start working on a project.# Move into your new folder, then open it in VS Code
cd my-first-project
code .code doesn't work, open VS Code → Cmd+Shift+P → type "shell command" → click "Install 'code' command in PATH"The final two commands in your starter set. clear is harmless housekeeping. rm is the one command in the terminal that can genuinely lose you work — so you learn it with the safety rules built in.
clear
cls also works.rm on files you created yourself. Never use rm -rf / (this would attempt to delete everything). Always double-check the filename before pressing Enter.# Create a throwaway file, then remove it
touch delete-me.txt
rm delete-me.txtRemove-Item delete-me.txtStart typing a folder or file name and press Tab. The terminal will auto-complete it for you. Try it: type cd my- then press Tab. It completes to cd my-first-project/. This saves enormous amounts of typing and prevents typos. Use it constantly.
Six commands in order. Each one builds on the last. By the end, you'll have a real project folder on your Desktop, an empty HTML file inside it, and VS Code open on the whole thing — and you'll have done it without touching a single GUI.
# 1. Go to your Desktop cd Desktop # 2. Create a project folder mkdir ai-project # 3. Move into it cd ai-project # 4. Create your first file touch index.html # Mac/Git Bash # ni index.html # Windows PowerShell alternative # 5. Check it's there ls # 6. Open it in VS Code code .
• If
cd Desktop says "no such directory" — your home folder may be different. Try ls first to see what folders exist, then cd into the right one.• If
touch doesn't work on Windows — use ni index.html instead (PowerShell).• If
code . doesn't work — see the Mac fix in Command 6 above, or try opening VS Code manually and using File → Open Folder.
Right. Take a breath. That was a lot of new words for one segment. If your head's buzzing a bit — good. That means you're actually learning, not just scrolling. Grab a glass of water if you need one. I'll wait.
open vscodecode .code . at the start of every project session from now until forever. It connects your terminal to your editor — two tools, one workflow. You'll be typing this in your sleep by Week 2.start vscode .start is a Windows command for opening programs, but code . is the cross-platform VS Code command that works everywhere.vscode --opencode, not vscode.Ctrl+` — Open terminal in VS Code
Tab — Auto-complete file/folder names
↑ — Recall your last command (press repeatedly to go further back)
Ctrl+C — Cancel a running command (not copy — in terminal this stops things)
pwd (where am I), ls (what's here), cd (go somewhere), mkdir (make folder), touch (make file), code . (open in VS Code), clear (clean up), rm (delete — carefully). That's the terminal.The terminal you just learned to use is the same one that will deploy your AI tools to the internet. In Segment 11, you'll type a command in this terminal that sends a message to Claude and gets a response back — through code you wrote. Every command you just practised gets you closer to that moment.
Segment 3 — What you mastered
- pwd, ls, cd, mkdir, touch, mv, cp, rm — what each one does
- Why rm -rf is the canonical 'AI hallucinated something destructive' moment
- The read-before-you-run habit for any pasted command
- Keyboard shortcuts that make terminal work fast
Quick recall — Segment 3
Segment summary · Seg 3 · The Terminal
The terminal is just a text box. You know the commands that matter.
- cd, ls/dir, mkdir, touch/echo — navigation and file creation
- The terminal is faster than a file explorer once you know it
- Tab completion: stop typing at the first unique letters, hit Tab
- Up arrow: repeat last command. Ctrl+C: stop a running process
By the end of this segment you will be able toHave a GitHub account, your first repository, and a working git add → commit → push loop that AI cannot accidentally undo for you.
Git & GitHub — Your Safety Net
▸ 30-second preview — where you're headingAt the end of this segment your code lives in two places: on your laptop, and in a repository you own on Gi...
Git is version control — the safety net every professional developer uses every day. It lets you take a snapshot of your code any time you want, and it lets you go back to any snapshot later. If you break something, one command undoes it. If you want to try an experiment, you can branch off and come back if it doesn't work. If your hard drive dies, your code is safe on GitHub.
GitHub is where those snapshots live on the internet. Think of git as the camera and GitHub as the photo album. You'll learn four commands — add, commitA save point. A snapshot of your code at a specific moment with a description of what changed., push, status — that cover roughly 80% of everything you'll ever do with git. Professional engineers use dozens more, but you don't need them to build and ship.
Three boxes behind you (Understanding, VS Code, Terminal), one lighting up (Git & GitHub), and the stack continues. Git is the first segment where tools start connecting: the terminal runs the commands, VS Code shows what's changed, GitHub stores the result. The pieces begin to function as a system, not as isolated tools.
By the end of this segment you'll have your first public GitHub repository with your real name on it. That's the thing employers, clients, and collaborators can click on. Everything you build for the rest of the course goes into repositories like this one, and they stay yours forever — the course ending doesn't delete them.
Why git feels pointless at first And why to trust it anyway — before you learn the hard way.
git revert would have fixed it in two seconds. That's the moment git stops feeling pointless.Think of Git as save points in a video game.
You'll change one line of your AI tool's system promptHidden instructions that control how the AI behaves. The user never sees them but they shape every response., type git push, and 30 seconds later the live version updates automatically. Break something? One command rolls it back. That's what Git gives you.
You're playing a game. Before you fight the boss, you save. If you die, you go back to the save point — you don't restart the whole game.
Git does this for your code. Every time you "commit," you create a save point. If you break something, you go back. Your entire history is preserved. You can never truly lose work if you're using Git.
GitHub is where your save points are stored online. Think of it as cloud backup for your code. It also enables deployment — Netlify reads your code from GitHub and puts your website online automatically.
git --version in terminal. If it's not there, install Xcode Command Line Tools: xcode-select --installAfter installing Git, you verify it with one command and then do a one-time configuration — tell Git who you are so it can label your save points with your name. You only ever do this once per machine; Git remembers from then on.
git --version
# Should show something like: git version 2.43.0Git needs your name and email to label your save points. Run these three commands (replace with YOUR details):
git config --global user.name "Your Name" git config --global user.email "your@email.com" git config --global init.defaultBranch main
"update files" or "fixes" — useless in 3 months when you're trying to find what changed. Demand specifics: what changed, why, what the intended outcome was. A good commit message is one sentence that a future-you (or a teammate) can read and immediately understand. Read every AI-suggested commit message before you accept it.Git has hundreds of commands. You need 4. These four cover about 80% of everything you'll ever do with version control:
Let's create a repository (a tracked project), add a file, create a save point, and push it to GitHub. Use the "ai-project" folder from Segment 3:
SHARP M2 The Fake Admission.When AI responds 'Let me be honest with you…' with no substance — that's M2. Here's how to break it.
Time to make your first commit. The four commands below turn your ai-project folder into a Git repository, stage the file you already created in Segment 3, and lock in your first save point. You'll practise them in the interactive terminal below — or copy and run them in your real terminal alongside.
# Make sure you're in your project folder cd ~/Desktop/ai-project # Turn this folder into a Git repository git init # Stage everything (your index.html file) git add . # Create your first save point git commit -m "My first commit"
Connecting your local folder to GitHub so your code lives in two places — your computer and the cloud.
1 Go to github.com/new
2 Fill in the form
ai-project3 Create and copy the URL
https://github.com/YOURUSERNAME/ai-project.git4 Connect from your terminal
# Connect your local folder to GitHub (paste YOUR URL from GitHub) git remote add origin https://github.com/YOURUSERNAME/ai-project.git # Push your code to GitHub git push -u origin main
git push in 2021. If you run git push and it asks for your GitHub password, pasting your normal password will fail. You need a Personal Access Token (PAT) — it looks like a long string and acts as your password for git commands. Generate it before you push, not after it fails:- Go to github.com/settings/tokens (Settings → Developer settings → Personal access tokens → Tokens (classic))
- Click Generate new token (classic)
- Note: "BUILD course · my laptop". Expiration: 90 days (re-generate in Week 13 if you keep coding)
- Scopes: tick repo only (that's all you need for this course)
- Click Generate token — copy the token immediately and store it somewhere you can find it (password manager, or a note). You can't see it again after you close the page.
- When
git pushasks for username, enter your GitHub username. When it asks for password, paste the PAT (not your account password).
Git feels like overkill right now. I know. You're saving files to a cloud service when you could just... save the file. But the moment something breaks — and it will — you'll type one command and everything rolls back. That's not a feature. That's a superpower.
• If
git push asks for username/password — GitHub now requires a Personal Access Token. Go to Settings → Developer Settings → Personal Access Tokens → Generate new token (classic). Use this as your password.• If you get "remote origin already exists" — run
git remote remove origin then try the git remote add command again.• If you get "branch 'main' has no upstream" — make sure you used
git push -u origin main (with the -u flag).
git add . → git commit -m "what I changed" → git push. Three commands. Every time. This becomes muscle memory within a week.- Start every session with
git pull. Pulls down whatever the other machine pushed last. Forgetting this is how merge conflicts start. - End every session with
git push. Even if you didn't finish — push your work-in-progress so the other machine has it. - If
git pullreports a "merge conflict": don't panic. Git marks the conflicting lines in your file with<<<<<<<and=======and>>>>>>>. Open the file in VS Code (which highlights conflicts visually), decide which version to keep, delete the markers, thengit add .→git commit -m "resolve conflict"→git push. For anything complex: paste the whole conflict block into Claude desktop with "I'm on [OS], what should I keep?" — then verify the explanation before accepting.
▶ Step-by-Step Walkthrough (click to expand)
git push then git commitgit add . → git commit -m "message" → git pushadd prepares your changes, commit saves them locally, push uploads them to GitHub. This three-step workflow will become second nature.git save then git uploadgit add, git commit, and git push.Ctrl+Shift+G — Opens the Git panel in VS Code (visual view of your changes)
↑ in terminal — Recall last command (use this constantly with
git add . → git commit → git push)
Segment 4 — What you mastered
- What Git does and why every project needs it
- git init, add, commit, push — the four-command loop
- GitHub account created and SSH or HTTPS auth configured
- Your first repo pushed and visible at github.com/yourname/repo
Quick recall — Segment 4
Segment summary · Seg 4 · Git & GitHub
Your code is saved, versioned, and in the cloud.
- git init → git add . → git commit -m "message" → git push — the four-step loop
- Git saves snapshots. GitHub stores them in the cloud. They're different things.
- Commit messages: write what changed, not what you did ("Add submit button" not "Updated file")
- .gitignore: files Git should never track (node_modules, .env, secrets)
By the end of this segment you will be able toHave Node.js and Python installed and verified, npm working, and the confidence to fix PATH errors when AI suggestions don't match your machine.
Node.js & Python — Your Two Languages
▸ 30-second preview — where you're headingTwo languages, one installation each.
Node.js and Python are the two languages that power most of the AI tooling in 2026. Node.js is what runs the JavaScript build tools, the dev servers that let you preview your site locally, and the Cloudflare Workers you'll deploy in Segment 11. Python is what runs the official Anthropic SDK examples, most of the Jupyter notebooks you'll encounter online, and the automation scripts you'll write in Week 3.
This segment installs both and verifies each one works with a single test command. No writing code yet — that's Segments 8 through 10. This is the environment-building step: get the runtimes on your machine so every subsequent segment has the tools it needs to work. It takes about 20 minutes of waiting for installers and five minutes of checking that they worked.
Four boxes behind you now — Understanding, VS Code, Terminal, Git/GitHub — and the fifth lighting up: Node & Python. This is the last pure-installation segment. From Segment 6 onwards, the stack boxes represent the things you're actively using to build, not just the things you've set up.
Notice the stack is nearly half-lit. You're close to the moment when the environment stops being a pile of separate tools and starts behaving like one workshop. By the time you finish Week 1, all seven boxes are lit, and your first deployed website is live on the internet.
You do not need to choose between the two languages Every AI-adjacent engineer installs both. Here's why.
You don't need to learn to code in either language. I want to be clear about that before we go any further. You need to install them so your computer can run the tools that are written in them. Think of it like installing a DVD player — you don't need to know how to make DVDs, you just need the player so you can watch them.
.msi installer. Accept all defaults. It will also install npmNode Package Manager. An app store for code — type npm install and it downloads tools for you. automatically..pkg installer. Or if you have Homebrew: brew install nodeTwo version checks in sequence — node and npm. Both should return numbers. If either errors with "command not found", the PATH did not pick up the new install and the fix is almost always to close the terminal and reopen it (which forces a PATH refresh). A reboot is the nuclear option but rarely necessary.
node --version # Should show: v24.x.x (any 24.x number is fine) npm --version # Should show: 11.x.x (npm comes with Node)
• Close your terminal completely and reopen it — the PATH needs to refresh
• Windows: restart VS Code after installing Node
• Mac: if
node not found, try opening a new terminal tab• If
npm not found but node works: reinstall Node — npm should come bundled• If you see
EACCES or "permission denied" when you run npm install later (especially on Mac/Linux): don't use sudo npm — that's the shortcut that causes bigger problems. The proper fix is to re-point npm's global folder to your home directory. Ask Claude: "I got EACCES on npm install. I'm on [Mac/Linux]. Walk me through fixing npm's global prefix without using sudo. Explain each step before I run it." Don't let AI suggest sudo as the fix.
▸ Read here — What is npm? Node Package Manager — the app store for code you'll use every week.
npm install something, it downloads code that someone else wrote and makes it available for your project. You'll use this to install tools, frameworks, and libraries throughout the course.node --version and npm --version. Both should print a version number without errors.▶ Step-by-Step Walkthrough (click to expand)
Node install failed? Don't panic. Screenshot, paste, verify.
This is the segment where Windows PATH issues hit hardest. If node --version prints an error instead of a version number — or python --version returns "command not found" on Windows — that's the #1 install issue people hit in this course. Don't Google it. Don't retry blindly. Do this instead:
Win+Shift+S. Mac: Cmd+Shift+4. Save it somewhere you can find — Desktop is fine.I'm on [Windows 11 / Mac / Linux]. I just installed Node.js using the LTS installer from nodejs.org. When I run `node --version` in a new terminal, I get this error [attached screenshot]. Help me fix it without breaking anything else on my system. Walk me through each step and tell me what it does before I run it.nvm. Before running any command, ask: "what does this actually do, and what happens if it goes wrong?" If Claude can't explain that clearly, don't run it.node --version in a fresh terminal.pkg installer. Or with Homebrew: brew install python. Python may already be installed — check first.python --version # Should show: Python 3.14.x # Mac/Linux users: try python3 --version if python doesn't work pipPython Package Manager. Same idea as npm but for Python tools and libraries. --version # Should show: pip 24.x or similar # Mac/Linux: try pip3 --version
SHARP M4 The Confident Guess.When you ask AI 'is this Worker code secure?', it will confidently say yes or list generic security concerns that don't apply to your code.
python --version and pip --version show version numbers?• Windows: If
python not found — you probably missed the "Add to PATH" checkbox. Reinstall and CHECK that box.• Mac: Use
python3 and pip3 instead of python and pip — macOS often uses python3 as the command.• Close and reopen your terminal after installing — PATH updates need a fresh terminal.
• If
pip not found: try python -m pip --version
▸ Read here — What is pip? Python's package manager — same idea as npm, for AI SDKs and tools.
pip install something downloads Python packages. The Anthropic SDK (for building with Claude), OpenAI SDK, and many AI tools are Python packages you'll install with pip.Installing tools with npm
Browser tooling and beyond
Cloudflare Workers (serverless functions)
Build tools and automation
Quick automation scripts
Data processing and analysis
Scheduled tasks and cron jobs
Backend tools if needed
npm install express." Which language does this package belong to?pip install, not npm install. npm is Node.js's package manager.npm is Node's package manager. If a tutorial says npm install, it's a JavaScript package. If it says pip install, it's Python. That's all you need to know to tell them apart.Right. Deep breath. That was the heaviest setup segment — more installs in one sitting than most people do in a year. Fancy a breather? It's getting a bit much, I can feel it too. Here's the good news: you're done installing things. Segment 6 is understanding, Segment 7 is building. The heavy lifting is behind you.
• VS Code (Segment 2)
• 4 extensions: Live Server, Prettier, GitLens, HTML CSS Support (Segment 2)
• Git (Segment 4)
• GitHub account (Segment 4)
• Node.js + npm (this segment)
• Python + pip (this segment)
⬜ Netlify account (next segment)
Node.js is the engine that runs your AI tools. Here's what 4 lines of Node can do — you can't run this yet, but by Segment 11, you will:
const data = await response.jsonA text format for structured data. Looks like a list of labels and values. Most APIs send and receive JSON.();
console.log(data.content[0].text);
// → "Hello! I'm Claude. How can I help you today?"
Four lines. Your code talks to an AI. That's where we're heading. The setup you just completed makes this possible.
Segment 5 — What you mastered
- Why Node.js and Python both matter for this course
- node --version and python --version both return real numbers
- npm working — your package manager is online
- What to do when an install errors out (screenshot, paste to Claude, verify each step)
Quick recall — Segment 5
Segment summary · Seg 5 · Node.js & Python
You can run code outside the browser. npm install works without panicking.
- Node.js runs JavaScript on your computer — not just in Chrome
- npm is a package manager: npm install adds tools, node_modules holds them
- Python: pip install, virtual environments — same idea, different language
- Never commit node_modules or venv — they're reproducible from package.json/requirements.txt
By the end of this segment you will be able toUnderstand DNS, hosting, and deployment well enough to ship a static page from your laptop to a public URL via Netlify in under 10 minutes.
DNS, Hosting & Deployment — How the Internet Works
▸ 30-second preview — where you're headingYou type a domain name into a browser.
DNS, hosting, and deployment are three topics that get lumped together under "how the internet works" and usually get skipped in beginner courses. We're not skipping them. Not because the detail is exciting — it isn't — but because every time something breaks on a deployed site, the root cause is almost always in the DNS or hosting layer, and if you don't understand those layers, you can't fix them.
The good news is that you only need the mental model, not the deep detail. By the end of this segment you'll understand DNS in roughly three sentences, hosting in one diagram, and deployment as a single pipeline — and you'll have a Netlify account set up ready for Segment 7, when you'll push your first site live.
Five boxes behind you — Understanding, VS Code, Terminal, Git/GitHub, Node & Python — and the sixth lighting up: Netlify (hosting). This is the segment where the word "live" stops being theoretical. Segment 7 pushes code; Netlify picks it up automatically; your site appears on the internet in about thirty seconds.
After this segment, there are no more tools to install for Week 1. The stack is fully set up. Everything from Segment 7 onwards is about writing code, pushing it, and watching it run — the deployment pipeline runs itself, because you built it in this segment.
Why we use Netlify specifically Free tier, no credit card, automatic HTTPS, shortest path from git push to live URL.
Quick one before we build anything. You've got code on GitHub. Netlify is set up. But before we connect them in Segment 7, it helps to understand what actually happens when someone types a web address into their browser. Takes two minutes.
example.comThe whole flow URL → DNS → server → browser. How every website in the world reaches you.
in VS Code
git pushto GitHub
the push automatically
in ~30 seconds
2. Click "Sign up with GitHub" — this connects the two accounts automatically
3. Authorise Netlify to access your GitHub (it needs this to detect when you push code)
4. You'll see your Netlify dashboard — empty for now. That changes in Segment 7.
⚠ Netlify credits — read before you push code
- Every git push = 1 build = credits used
- Auto-deploy is ON by default — stop it while developing
- Stop builds: Site config → Build & deploy → Stop builds
- Only turn back on when a batch of changes is ready
- Extra credits: ~$5 for 500. Check balance at app.netlify.com
• Make sure you're signed in to GitHub first in the same browser
• Try signing up with email instead, then connect GitHub later
• If authorisation fails, check that your GitHub account email is verified
Your complete environment is now set up VS Code + Terminal + Git/GitHub + Node.js + Python + Netlify. The full stack.
DNS and hosting aren't sexy topics. I get it. But understanding how the internet actually delivers your website to someone's browser — that's the kind of knowledge that separates people who build things from people who use things other people built. Two more minutes and you'll have it.
▶ Step-by-Step Walkthrough (click to expand)
git add . && git commit -m "fixed colour" && git push. What happens next?Reality: Netlify's free tier gives you 100GB bandwidth and 300 build minutes per month. That's enough for thousands of visitors. The AI tools you'll build in this course will run on free infrastructure — Netlify for hosting, Cloudflare Workers for the API proxy. Professional architecture, zero hosting cost.
Segment 6 — What you mastered
- What DNS does (your domain → an IP address)
- What hosting is and why Netlify's free tier covers you for the whole course
- Drag-and-drop deploy: laptop → Netlify → live URL
- Why custom domains can wait until after the course
Quick recall — Segment 6
Segment summary · Seg 6 · DNS, Hosting & Deployment
You understand how your code gets from your laptop to a URL.
- DNS: domain names map to IP addresses — like a phone book for the internet
- Netlify: drag a folder, get a URL. Connect GitHub, get auto-deploys.
- HTTPS: free via Netlify/Cloudflare. Unencrypted HTTP is never acceptable.
- Deployment is not magic — it's file serving + DNS + a CDN
By the end of this segment you will be able toHave a real, deployed website live on the internet — and the deploy loop is so muscle-memory you can ship a fix in under 60 seconds.
Your First Live Website
▸ 30-second preview — where you're headingYou write four lines of HTML, press git add, git commit, git push.
git add, git commit, git push. Thirty seconds later, a URL Netlify gave you loads on your phone, on your friend's phone, and on a stranger's phone halfway around the world. The internet isn't a concept anymore — it's just a place your code lives.This is the segment the whole first week has been building towards. All the setup you've done — installing VS Code, learning the terminal, connecting git, setting up Node, creating a Netlify account — was preparation for this moment. You write HTML, push it to GitHub, and Netlify deploys it live. No extra steps. No configuration files. Just the pipeline the earlier segments put in place, running on its own.
You don't need to understand every line of HTML yet — that's Segment 8. For now the goal is to close the loop from "code on my laptop" to "live on the internet" in one continuous flow. Once you've done it once, it stops feeling magical and starts feeling routine, and that routineness is the thing that lets you build everything that comes after.
SHARP M4 check.When your first deploy works, AI tools will offer to "optimise" it or "add best practices".
This is the one. Six segments of setup. Six segments of trust. Here's where it all comes together. You're going to write some HTML, push it to GitHub, connect Netlify, and visit a URL that shows YOUR website. Live. On the actual internet. Ready?
1 Open your project in VS Code
2 Open index.html
3 Replace the contents
4 Open in browser
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First Website</title> <style> /* Dark theme — looks professional from the start */ body { background: #0b0b0c; color: #f3efe9; font-family: -apple-system, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; } .card { text-align: center; padding: 48px; max-width: 500px; } h1 { font-size: 2.5rem; margin-bottom: 12px; } p { color: rgba(243,239,233,.6); line-height: 1.7; } </style> </head> <body> <div class="card"> <h1>Hello, World.</h1> <p>I built this. From scratch. And it's live on the internet.</p> </div> </body> </html>
▸ Read here — Don't worry about understanding every line yet That's Segment 8. Right now the goal is: write code → push it → see it live.
Right-click your index.html file in VS Code's explorer panel. Click "Open with Live Server" (that's the extension from Segment 2). A browser tab should open showing your page — dark background, white text, centred on the screen.
• If "Open with Live Server" doesn't appear — make sure the Live Server extension is installed (Segment 2)
• If the page is blank — check you saved the file (Ctrl+S)
• If it looks wrong — make sure you pasted ALL the code, including the opening
<!DOCTYPE html> line
You know this workflow now. Open the terminal (Ctrl+`) and run:
git add .
git commit -m "My first real webpage"
git pushThree commands. Every time. This is already becoming muscle memory.
▶ Step-by-Step Walkthrough (click to expand)
2. Click "Add new project" → "Import an existing project"
3. Click "GitHub"
4. Find and select your
ai-project repository5. Leave all settings as default — Netlify detects it's a static HTML site
6. Click "Deploy"
Wait about 30 seconds. Netlify will show "Published" with a green checkmark. You'll see a URL that looks something like random-name-12345.netlify.app.
- "Deploy failed" in red — click the failed deploy in the Deploys tab to see the build log. For a plain HTML site the build command must stay empty and Publish directory must be
/. If Netlify auto-guessednpm run build, clear it: Site settings → Build & deploy → Build command (leave blank) → Save. - Live URL shows "Page not found" — your
index.htmlisn't at the repo root. Check GitHub: the file must be directly in the repo, not inside a subfolder. If it's in a subfolder, set Publish directory to that folder name (e.g.publicorsite). - Deploy succeeds but the page is blank — open DevTools → Console (F12). You'll usually see a 404 for a missing CSS/JS file. Netlify paths are case-sensitive;
Styles.cssandstyles.cssare different files. Rename to match exactly. - Push happened but Netlify didn't rebuild — check the Deploys tab for your latest commit SHA. If it's not there, the GitHub webhook is broken: Site settings → Build & deploy → Continuous deployment → Link repository to reconnect.
Click the URL Netlify gave you.
Open it on your phone. Send it to a friend. Open it in a different browser. It works everywhere. Because it's on the internet. Your code. Your design. Your URL.
I'm not going to pretend this wasn't a lot of work to get here. Six segments of setup. You installed VS Code, learned the terminal, set up Git, created a GitHub account, installed Node.js, installed Python, created a Netlify account. And now you've got a live website. That's Week 1 done. Properly done.
• If Netlify says "Deploy failed" — check that your
index.html is in the root of your repo, not in a subfolder• If the URL shows a blank page — view source in browser to check the HTML is there
• If you can't find the URL — go to your Netlify dashboard, click your site name, the URL is at the top
• If nothing loads — wait 60 seconds and refresh. First deploys can take a moment.
That random URL isn't great. In Netlify: Site settings → Change site name. Type something you like — it becomes your-chosen-name.netlify.app. Free. Instant.
SHARP M6 The Redirect.After your first successful deploy, if you ask AI 'my site works but looks bland — what should I do?' it often...
git add . → git commit -m "message" → git pushVS Code, Git, Node, Python, npm, pip
cd, ls, mkdir, git, node, python, npm, pip
Your URL, your code, your deploy
Seven days ago you didn't have any of this. Now you have a deployed website and every tool you need to build AI applications. Week 2 starts building them.
Segment 7 — What you mastered
- Your first HTML page deployed via Netlify drag-and-drop
- The edit → save → drag → live cycle
- How to share the URL with friends, family, prospective clients
- What 'production' means and why it raises the stakes
Quick recall — Segment 7
Segment summary · Seg 7 · Your First Live Website
You shipped something real. A URL exists that wasn't there before.
- index.html is the default file — browsers look for it automatically
- Your first site: HTML structure + a little CSS + a deploy = a real product
- Live Server for local preview, Netlify for production — same workflow every time
- Version control from the start: every project gets git init on day one
Building
git push. If that flow isn't working, go back to Segment 7 and use the self-service flow from the "What You Need" slide (sl0g). Don't try to power through — every Week 2 segment builds on a working Week 1 pipeline.Good breath point. If you need to stop here, save your place — we'll email you the link back.
