Learning on Web Dev Open is free for all.

Start hereSetup
Setup

All the setup you need, for the course.

Watch each one, run the line, tick it off. Your machine, your free tier: WebDevOpen never runs a model for you.

0 / 7~60 min

A terminal

4 min

A window where you type a command and the machine answers. Already installed: you just have to find it.

⌘ + Space → "Terminal"
Spotlight. Pin it to your Dock.
pwd
Prints where you are.
did it work
echo hello
→ hello
zsh: you@laptop$pwd/Users/you/projects$echo hellohello$n

Node

10 min

Runs JavaScript outside the browser, and brings npm, the thing that downloads other people’s code for you.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Homebrew first, if you have not got it.
brew install node
did it work
node -v && npm -v
→ two version numbers, node at 20 or above
app.jsnodeoutputhello world$ npm installreactnextzodnode_modules

An editor

8 min

Where you read and change code. VS Code is the safe default; everything in this course assumes nothing about it.

brew install --cask visual-studio-code
did it work
code --version
→ a version number, means you can open folders from the terminal
code.visualstudio.com ↗
~/projects/first-siteFIRST-SITEindex.htmlstyle.cssapp.jsapp.js123456mainJavaScript · UTF-8

Git

8 min

Takes a snapshot of your project whenever you ask. Every mistake after this is undoable.

brew install git
git config --global user.name "Your Name"
git config --global user.email "you@example.com"
did it work
git config --get user.email
→ the address you just set
WORKING TREEindex.htmlMstyle.cssMapp.jsM$ git commit -m "first pass"a91c43f0dec72b85e1afHEADgit checkout c72b8, nothing is lost

A GitHub account

10 min

The copy of your work that is not on your laptop, and the page a hiring manager will actually open.

Sign up at github.com
Use a username you would put on a CV.
brew install gh && gh auth login
Signs your terminal in. Pick HTTPS.
did it work
gh auth status
→ Logged in to github.com as <you>
github.com/signup ↗
your laptop4 commitsgit pushorigin: github.comyour-usernamecontributions

An AI coding tool

12 min

It proposes a change; you read the diff and decide. Install two: comparing their answers teaches you more than either alone.

npm install -g @anthropic-ai/claude-code
Terminal agent. Sees the whole repo.
brew install --cask cursor
Editor agent. Sees what you are looking at.
did it work
claude --version
→ a version number. Free tiers are fine: the course never needs more.
make the header stickyproposed: components/Header.tsx -++ RejectApprove

Vercel

8 min

Connects to GitHub so that a push turns into a public URL. Every lesson from here ends with one.

Sign in at vercel.com with GitHub
Not with email: the link to GitHub is the point.
npm i -g vercel && vercel login
did it work
vercel whoami
→ your Vercel username
vercel.com/signup ↗
pushbuildliveinstalling dependencies✓compiling 12 routes✓uploading static assets✓first-site.vercel.appReady

60 minutes end to end. Ticks are kept on this device only.

Maintained here

Free tiers change. This page changes with them.

No lesson names a plan, a model version or a rate limit. They all point here, so the curriculum survives the market moving: one page has to keep up, and it is this one.