Do this before the workshop, or you will spend the hour installing things.
0 of 6 done
Sign up at github.com. This is where your code lives, with a history of every change. Pick a username you would put on a CV, because it becomes part of your web address.
Done when you can see your profile at github.com/YOUR-USERNAME.
Sign up at vercel.com using Continue with GitHub, not email. Vercel puts what is on GitHub onto the internet, republishing about twenty seconds after every change.
The free plan is enough. Skip anything asking for a card.
Done when you reach the Vercel dashboard.
Download from code.visualstudio.com and open it once. This is the app you write in.
Done when VS Code opens.
Git moves your work between your laptop and GitHub. You use it by typing commands into a terminal.
Open Terminal: press Command Space, type terminal, press enter. Paste this into Terminal and hit enter:
xcode-select --install
Click install and let it finish. If it says they are already installed, move on.
Install from git-scm.com/download/win, clicking next on every screen. Then open Git Bash from the Start menu. Use Git Bash, not Command Prompt or PowerShell.
Now tell Git who you are.
Paste these into your terminal and hit enter:
git config --global user.name "YOUR-NAME" git config --global user.email "YOUR-EMAIL"
Now check it worked. Paste this in and hit enter:
git --version
Did it print a number? Then you are done.
Runs the whole loop once on a throwaway project, so anything that breaks, breaks now.
Make a repository called practice at github.com/new. Tick Add a README file.
Paste this into your terminal and hit enter. It makes a folder called Code, then copies your practice project into it.
mkdir -p ~/Code cd ~/Code git clone https://github.com/YOUR-USERNAME/practice.git cd practice
In VS Code, go to File, then Open Folder, and choose Code, then practice. Open README.md, type anything, and save.
Back in the terminal, paste this in and hit enter:
git add -A && git commit -m "first commit" && git push
GitHub now needs to check it is really you. Usually a browser window opens and you click approve. That is it.
Sometimes instead the terminal asks for a username and password. Your normal GitHub password will not work here, because GitHub stopped accepting them a few years ago. Instead you need a token, which is just a long password GitHub generates for apps.
Make one at github.com/settings/tokens: choose Tokens (classic), Generate new token, tick the box marked repo, and generate. Copy it, and paste it into the terminal where it asks for your password. Nothing will appear on screen while you paste, which is normal.
Done when your change shows on GitHub.
Plan: get something live in the first ten minutes, then improve it.
At github.com/new, name it in lowercase with hyphens instead of spaces. Leave it public. Tick Add a README file.
Click Add file, then Create new file. Name it index.html, type <h1>hello</h1>, and commit.
The name matters: index.html is the page a site shows by default.
On Vercel: Add New, Project, find your repo, Import. Set Framework Preset to Other and click Deploy.
You now have a live address. Open it.
Paste this into your terminal and hit enter:
cd ~/Code git clone https://github.com/YOUR-USERNAME/YOUR-REPO.git cd YOUR-REPO
Then open the folder in VS Code: File, Open Folder, Code, YOUR-REPO.
Use the tool below. It will ask a couple of questions and give you a smaller version, plus a prompt to build it.
Paste the prompt into your AI assistant. Copy the code it gives you, open index.html in VS Code, replace everything, and save.
Paste this into your terminal and hit enter:
git add -A && git commit -m "add my page" && git push
Refresh your live address after twenty seconds.
One change at a time. Paste, save, push, refresh. When something breaks you will know which change broke it.
If you finish early, look up Claude Code or GitHub Copilot.
Three of mine, along with how long they took.
An invitation site for a Tolkien-themed birthday.
Games to play across a table.
The fund's site. Several pages, lots of assets, application forms, automated emails.
Describe what you want to build. It will ask a couple of questions, then give you a version that fits in forty minutes and a prompt to build it.