AI Workshops All 12 workshops ↗
The short course 120 minutes One session · Laptops open

The Whole AI Trail in One Ride

Twelve workshops in one session. The full version is there too — All twelve workshops, to work through on your own, at your own pace. Only have thirty minutes? Start with Tacking Up.

Emile du Toit

Presented by Emile du Toit
brainitconsulting.com

You leave with a live web address for your own business, made in the last hour, that you can change again tomorrow.

Next sessionsRabun County Public Library, Clayton

Mondays: Oct 5, 12, 19 and Nov 2, 9, 16
10:30 am
Where

Rabun County Public Library
73 Jo Dotson Circle
Clayton, GA 30525

To reserve a place

Ask at the front desk, or call
706.782.3731

Who it is for

Ages 12 and up.
Little or no experience is exactly right.

Places

Ten, with a waiting list of up to five.
Bring a laptop if you have one — it is not required.

More dates go up here as the library confirms them.

New: a beginner’s guide to letting Claude or ChatGPT search Gmail

Welcome — and why there is a horse in all of this?

You are in the right room even if you have never written a line of code — and especially if you half suspect you have already missed the boat. We start at the beginning, we go at the pace of the room, and no question here is too basic to ask out loud.

Now, the horse.

I grew up on a farm in South Africa and rode to school on horseback. So when I say a large language model is like a horse, it is the thing I actually know rather than an image that sounded clever. I have tacked one up in the dark, been thrown off in front of people, and learned early that a horse does not care how clever you are, only how clearly you ask.

All of that is true here. It is strong, it is fast, and it is no use to you standing in a field. It needs its tack on before it can do a day's work. It does what you asked rather than what you meant. And when it throws you, it is a horse, not a mirror. So the analogy is doing real work, not decorating the slides — and where it stops being useful, I will drop it and tell you the thing plainly.

One more thing: this is meant to be fun, and none of it is dumbed down. Briefs and version control, deployments and rollbacks, checks that run without being asked — the same concepts a professional team uses on Monday morning, out of thirty years in enterprise IT and a computer science degree. You get the real thing, in words that make sense the first time you hear them.

So ask whatever you like, whenever you like — that is what the room is for. But we do have a fair bit of ground to cover.

Right. Enough horsing around — let's get started.

The shape of itEight stops, and the last one is the point

The shape of the session. Print it if you like knowing what is coming.

1 Horse 0:03 2 Bags 0:13 3 Tack room 0:21 4 The agent 0:33 5 Trail map 0:48 6 Build it 1:00 7 Breadcrumbs 1:20 8 To market 1:32 Live 1:47 Same trail as the twelve. Fewer stops, and we do not stop long.
Fig. 1 — The ride. Stops 3 to 8 put your hands on the keyboard; stops 1 and 2 are the only talking.
ClockMinsStopWhat happens
0:003WelcomeThe promise, and the one rule: ask before you type.
0:03101 · The horseWhat the thing actually is. Standing instructions.
0:1382 · SaddlebagsTools and the loop. Why an agent is duller than it sounds.
0:21123 · The tack roomLab A. VS Code, and one folder for one job.
0:33154 · The agentLab B. Put it in the folder. First ride.
0:48125 · The trail mapLab C. Say what, never how.
1:00206 · Build itLab D. The page appears.
1:20127 · BreadcrumbsLab E. The undo, and GitHub.
1:32158 · To marketLab F. Live on the internet.
1:475The rest of the trailWhat we skipped, and where it is written down.
1:528QuestionsAnd the one thing to go home and do.

Three ways to take part, and none of them cost anything

Watch Lids down, hands off. No account, no installs, nothing to sign up for. You watch it happen on the screen, and every step is written down on this page to take away. If you came mainly to find out whether this is for you at all, that is a perfectly good reason to be here.

Free The one I steer most people to. A free account at claude.ai or chatgpt.com, open in a browser tab beside VS Code. You describe, it writes, you paste. Costs nothing, needs no card, and reaches exactly the same live web address as the paid route.

Paid Only if you already want to build. Claude Code or Codex, about $20 a month, where the agent works in the folder itself instead of handing you text to paste. Worth it if you are going to do this every week. Not worth it if you are still deciding whether you like the idea.

My order is: free first, and pay only when the free way starts annoying you. You should never feel you need to enter a card to keep up in a free workshop at a public library, so I will say that at the start and mean it.

Send this with the confirmationHandy to do before you come

Do these if you get the chance. Most people will not, and the session is built so that is genuinely fine.

If none of this is done, you are still fine.
We install together at stops three and seven, and anything we run out of time for is written down right here.

Of everything on that list, the business facts are what decide how your session goes.

Come with your real phone number, your real hours, the real job you keep being asked for and turning down. Build the page out of those and it is worth keeping. Build it out of made-up details and it is a demo you will forget by Tuesday.

Stops 1 and 2The only ten minutes with the lids down

This is the twelve-session series compressed hard. I say it once, clearly, and then we get to the keyboards.

1

The horse in the field

0:03 · 10 min

A large language model is a horse. Strong, fast, and no use to you standing in a field. It has no idea who you are, it forgets you between conversations, and it will confidently walk into a fence. The bridle is the words you steer it with. The saddle is the standing instructions you write once so every ride starts the same way.

Why it matters to a business Most people are getting a tenth of the value because they retype the same context every morning. Write it down once — what the business is, who the customers are, how you talk — and hand it over at the start of every conversation.
No tack. No use to you yet. Bridle to steer. Saddle to start right.
Fig. 2 — The whole of stop one, in one picture. The bridle is the words you choose. The saddle is the standing instructions you write once.

Nobody blames the horse for not knowing where the feed shed is. It has never been here before. Neither has this thing, every single time you open it.

Ten minutes on what it actually is. It is good at drafting, summarising, rewriting, explaining, and first attempts at almost anything. It invents things when it does not know — confidently, and in exactly the same tone it uses when it does know. It agrees with you far too readily, so asking it “is that right?” is close to useless. And it cannot remember yesterday: every conversation starts from nothing. If you have questions, hold on to them — I answer questions at 1:52 and I will hold to that.

2

Saddlebags and the loop

0:13 · 8 min

A chatbot talks. An agent does. The difference is the saddlebags — the ability to read a file, write a file, run a command, go and look something up. Give it a goal and let it check its own work, and that loop is all anybody means by “agent”, which is a much duller word than it sounds.

Why it matters to a business This is the line between something that drafts an email and something that reads your price list, writes the estimate, and puts it in the right folder. Everything after this depends on one idea: the thing can now touch your files.
The bags are the tools.
Fig. 3 — Read a file, write a file, run something, go and look something up. Without the bags it can only talk to you.
1 · Look What is the situation now? 2 · Decide Which tool, what input 3 · Act Open the bag. Do the thing. 4 · Check Did that actually work? The goal [ Set by you ] and where to stop
Fig. 4 — That is all anybody means by “agent”. Not a robot: a loop, with your hand near the reins.

For the rest of the session it is not answering you. It is working for you, in a folder on your own laptop. Lids up.

Stops 3 to 8Hands on the keyboard

Six stops, six labs. Each is on the screen while I talk, and I work at your pace — a step behind you, not ahead.

3

The tack room

0:21 · 12 min

Work lives in folders. That is all there is to it. The one rule that keeps everything after it safe is one folder, one job — because an agent you point at a folder can see everything in it, and an agent pointed at your entire Documents directory is a horse loose in the house.

Why it matters to a business You already have a filing system, and it is probably a bad one. This is not a computing lesson — it is one job bag per job, which you have been doing for years. You have just never applied it to a computer.
Lab A — The editor, and one folder

If VS Code is not installed yet

  1. Go to code.visualstudio.com. The big blue button already knows which machine you are on.
  2. Run the file it downloads. Accept the agreement.
  3. On the screen with tick boxes, tick Add “Open with Code” action to Windows Explorer file context menu and Add to PATH. Both matter later. Then Next, Next, Install.
  4. Launch it. Close the Welcome tab. Ignore everything on the left-hand strip for now.
On a Mac — the same lab, start to finish

Install VS Code

  1. Go to code.visualstudio.com. The big blue button already knows you are on a Mac.
  2. It downloads a disk image, a file ending in .dmg. Open it, and you get Visual Studio Code.
  3. Drag that into your Applications folder, then open it from there. There are no tick boxes and nothing to configure.
  4. The first time you open it, macOS asks whether you are sure, because you downloaded it. Click Open.
  5. Close the Welcome tab. Ignore the left-hand strip for now.

Make the folder

  1. Open Finder and go to Documents.
  2. File → New Folder. Name it after your business, all lowercase, no spaces.
  3. In VS Code: File → Open Folder → choose it.
  4. It opens in Restricted Mode, with a banner across the top. Click Manage in the banner, then Trust. You are the author.

One thing to know for the rest of the session: everywhere these steps say Ctrl, you press Cmd instead.

Make the folder

  1. Open File Explorer — Finder on a Mac. Go to Documents.
  2. Right-click in the empty space → New → Folder. On a Mac: File → New Folder.
  3. Name it after your business, all lowercase, no spaces. daleandson-page, not Dale & Son's New Page (final). Spaces and apostrophes cause a specific kind of misery later.
  4. In VS Code: File → Open Folder → choose the folder you just made.
  5. VS Code opens it in Restricted Mode, with a banner across the top, because it does not know who wrote these files. You are the author. Click Manage in the banner, then Trust. Until you do, the terminal and the agent stay switched off.
Pro tip — if you would rather type than click

The folder step is three lines in a terminal. On Windows, open Command Prompt or PowerShell from the Start menu:

cd Documents md daleandson-page cd daleandson-page code .

That last line — code then a space then a full stop — means “open VS Code here”. The full stop means “this folder”, and you will see it again all session.

On a Mac it is the same but mkdir instead of md. If code is not recognised, open VS Code, press Cmd+Shift+P, type shell command, and pick Install ‘code’ command in PATH. On Windows it works already, as long as you ticked Add to PATH when you installed.

If you opened Documents instead of the new folder, do File → Open Folder again. It is worth the sixty seconds to get right.

The point

The title bar now shows the folder name. Everything from here happens inside those four walls. That is the whole reason we made it.

Or ask for it

Nothing is installed yet — no VS Code, and no agent either. The agent arrives at stop 4. So this one goes in an ordinary browser tab: claude.ai or chatgpt.com, the free account from the bring-list. Windows or Mac, same two websites. Paste it and it walks you through at your own speed instead of mine.

I am on Windows and have never used a code editor. Walk me through installing VS Code and making one empty folder in my Documents for a small website. One step at a time, and wait for me to say "done" before you give me the next one. Assume I do not know any jargon.

On a Mac, change the first line to I am on a Mac before you send it. The rest of the prompt is the same, and you will get Finder and Cmd instead of File Explorer and Ctrl.

This is worth knowing on its own: when you are stuck on anything, asking to be walked through it one step at a time works far better than asking for the whole answer at once.

4

The horse that opens gates

0:33 · 15 min

Now the agent goes into the folder with you. It can read what is there, write new files, and ask permission before it does anything it cannot take back. The permission prompt is the gate: it is not the software being timid, it is you keeping the reins.

Why it matters to a business This is the moment you stop thinking of AI as a website you visit and start thinking of it as something that works on your own material. Almost nobody arrives having seen this, so I give it the full fifteen minutes.
Lab B — Put the agent in the folder

Free Start here, whichever route you take

  1. Open claude.ai or chatgpt.com in a browser tab and sign in. A free account is enough for everything we do today.
  2. Put that tab beside VS Code rather than behind it. On Windows, the Windows key + left arrow puts the browser on one half; click VS Code for the other. On a Mac, hold the pointer over the green button top-left of the window and choose Left from the menu that appears.
  3. That is the whole setup. You describe, it writes, you paste. The paid version below is doing the same thing — it just does the pasting itself.

Do this bit even if you paid. Two windows side by side is the working posture for the rest of the session, and it is worth arranging properly once.

Paid For anyone who already has, or wants, the $20 plan

Nothing in this session needs a paid plan. Skip this whole box if you are happy pasting — you will finish with exactly the same live website. It is here because sooner or later everyone asks what the paid version does, and the honest answer is: the pasting, by itself.

  1. Claude Code, no terminal. Install the desktop app from claude.com/download and sign in. It needs a Claude Pro plan; the free claude.ai account will not open it.
  2. Claude Code, terminal. In VS Code use Terminal → New Terminal, which opens already inside the right folder, and run the installer. Close the terminal, open a new one, then type claude.
  3. Codex. Start at chatgpt.com/codex and choose Sign in with ChatGPT when it first runs. Which plan includes what has changed more than once. Check the current answer on their own pricing page rather than trusting this one — it is the sort of thing that moves.

Inside VS Code, which is the tidiest way

Both of them have a VS Code extension, so the agent sits in a panel beside your files instead of in a separate window. If you are going to use one of these regularly, this is the version to have.

  1. In VS Code, click the Extensions icon in the left strip — four small squares, about fifth down. Or press Ctrl+Shift+X, which is Cmd+Shift+X on a Mac.
  2. Type Claude Code into the search box at the top.
  3. Check the publisher before you click anything. The right one says Anthropic underneath it. For Codex, search Codex and look for OpenAI. There are lookalikes with similar names, and installing one of those is how people end up handing their files to a stranger.
  4. Click Install. If it asks to reload the window, let it.
  5. A new icon appears in the left strip. Click it, then sign in when it asks. It already knows which folder you have open, so there is nothing to point at.

The extension and the desktop app are the same thing wearing different clothes, and they share the same sign-in. Install whichever you prefer; you do not need both.

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

There is also winget install Anthropic.ClaudeCode on Windows, or brew install --cask claude-code on a Mac, if either is more familiar to you.

On a Mac — the same lab, start to finish

Two windows side by side

Hold your pointer over the green button at the top left of the browser window and choose Left from the menu that appears. Then click VS Code to fill the other half.

If you are installing a paid agent

  1. The app. claude.com/download gives you a Mac version. Install and sign in; it needs a Claude Pro plan.
  2. The terminal version. In VS Code use Terminal → New Terminal, then run the Mac installer:
curl -fsSL https://claude.ai/install.sh | bash

Close that terminal, open a new one, and type claude. If you use Homebrew, brew install --cask claude-code does the same job.

The VS Code extension

Identical, except the shortcut for the Extensions panel is Cmd+Shift+X. Check the publisher says Anthropic, or OpenAI for Codex, before you install anything.

The first ride

Only an agent in the folder can do this on your own laptop: Claude Code, which needs a paid plan, or Codex, which a free ChatGPT account can also run for quick tasks. On the browser route, read it rather than run it — ninety seconds, and it is the clearest picture of the difference between the two.

What is in this folder?

The answer is “nothing”, and that is the right answer. It went and looked. Then:

Make a file called notes.txt with my business name in it.

Watch the permission prompt when it appears. It is asking because it is about to change something on your disk, and it will keep asking until you tell it not to. That prompt is the most reassuring thing in the whole session.

The file appears in the left-hand panel. Most people say “oh” out loud the first time.

Pro tip — the file it reads before you say anything. You will get tired of explaining who you are at the start of every conversation. Put it in a plain text file at the top of the folder and the agent reads it whenever it starts work there. This is the saddle from stop 1, living in your folder instead of in a browser setting.

What to call it, and how to get one written

For Claude Code call it CLAUDE.md. For Codex call it AGENTS.md. If you use one tool, one file is all you need.

If you use both, do not keep two copies — you will edit one and forget the other. Put everything in AGENTS.md and make CLAUDE.md a single line:

@AGENTS.md

Claude Code reads CLAUDE.md, and that line pulls the other file in. One file to edit, both tools reading it. Anthropic’s documentation recommends this; it also offers a symlink, but that needs administrator rights on Windows, so use the import.

Do not write it from a blank page. Get interviewed instead:

Write standing instructions for this folder, as CLAUDE.md at the top of it, and save the same text as AGENTS.md as well. Interview me first. One question at a time, and wait for my answer: - what my business is, in one sentence - what this folder is for - the facts you may always rely on: phone, hours, the area I cover, how I price - how I want you to write: short, plain, no jargon - the nevers - what you must never do or say Then show me the file before you save it.

From then on, every conversation in that folder starts with your business already explained. Workshop #006 is entirely about this file, and #007 adds your own vocabulary to it.

Write it once. Every ride after that starts properly briefed.

5

Drawing the trail map

0:48 · 12 min
What you want Where you are The map The horse
Fig. 5 — The horse changes every few months. What you wanted does not, and that is the part worth writing down.

The map is worth more than the horse. The rider’s goal is a nice campsite with a fire. Before anything gets built, you write down what you want in plain English — what it is, who it is for, and the one thing a visitor should do. Not how to build it. What, never how.

Why it matters to a business This is the transferable skill in the entire session. It works on a builder, a designer, a new employee and an agent, and it is the reason the people who get good results are not the technical ones.
Use your own business, not a made-up one

Everything from here builds your page, with your facts, your phone number, your “we don’t do gas”. Practising on something invented feels safer and teaches you less — an invented bakery never argues back, and you end up with a page you would never send to anybody.

The more ordinary the trade, the better this goes. A septic service or a fence contractor works better here than a photographer, because a page that does the job for those does the job for anything.

No business of your own? Borrow one you know well — a friend’s, or the last trade you paid for. Real facts are the point, not whose they are.

Worth thirty seconds of honesty here, because it is funny and it is true: the worst clients are programmers. They send a database schema and a list of tables when what was wanted was a paragraph about the business. They have described a solution and skipped the problem, and now everything downstream is guessing at what they actually needed. Non-technical people are better at this because they have no vocabulary to hide behind — they just say what they want.

A specification is not a technical specification. Nobody tells the builder which brand of nail to buy.

Plumber. Rabun County. Phone at the top, big. We don’t do gas. One thing to do: call. What you want PostgreSQL 16 React + Tailwind users, sessions, orders tables How to build it
Fig. 6 — Both of these are called a spec. Only the one on the left is any use to me, and it is the one you can write.
Lab C — Write the brief

Make the file

  1. In VS Code, make a blank file: Ctrl+N (Cmd+N on a Mac), or File → New Text File. If your File menu only offers New File…, that opens a list — choose Text File from it.
  2. Ctrl+S (Cmd+S on a Mac) and save it as brief.md — into the folder you made in Lab A, at the top of it, not inside a sub-folder. Check the file list on the left: if brief.md is not there, it went somewhere else. Save it again and watch that panel.
  3. Type the seven headings below and fill them in. Real facts from your own business — your actual phone number, your actual prices. Ten sentences is plenty.
  4. Write them the way you would say them to a customer across a counter, not the way you think a website should sound. That is the whole skill of this stop.

What the .md is, and why it does not matter. It is an ordinary text file. The # at the start of a line just marks a heading, so the assistant can tell your five sections apart. Nothing breaks if you get it wrong, and you can call the file brief.txt if you prefer — just say that name when you ask it to read the file. Save it from VS Code rather than Notepad: Notepad on Windows quietly adds .txt on the end, so you get brief.md.txt and then nothing can find it.

The seven lines

  1. What this is. One sentence a stranger would understand.
  2. Who it is for. Be specific. “Homeowners in Rabun County”, not “customers”.
  3. The one thing a visitor should do. Call, book, email, walk in. Choose one.
  4. Five facts that must appear. Phone, area covered, hours, what you charge or how you price, one thing you want known.
  5. What we do not do. The line that saves you three wasted calls a week.
  6. How it should feel. Two words. “Straight and local”. Not “modern and dynamic”, which means nothing.
  7. What it must not say. No stock photos of people in hard hats. No “passionate about excellence”.
The whole thing as one prompt, ready to paste

If a blank page is the problem, do not write the brief — get interviewed instead. Paste this and answer the questions it asks you.

I run a small business and I want a simple one-page website for it. Interview me first. Ask one question at a time and wait for my answer. Cover what the business is, who it is for, the one thing a visitor should do, my phone number and hours, the area I cover, what I do not do, and anything I wish people knew. Ask nothing technical - no frameworks, no colours, no layouts. When you have enough, write it to brief.md, show it to me, and ask whether anything is wrong before you build anything.

It will ask you things you had not thought about. That is the point, and it is the same thing a good builder does before quoting.

On the free route nothing gets written. A browser chat cannot reach your folder, so the last line of that prompt quietly does nothing — the brief comes back in the chat window instead. Select it, copy it, then in VS Code press Ctrl+N (Cmd+N on a Mac) for a blank file, paste, then Ctrl+S and save it as brief.md in your folder. Thirty seconds, and Lab D then works the same for you as for anyone who paid.

If you already have a website

Plenty of people do, and “build a landing page” is not much use to you if you already have one. Use this brief instead. It is the same exercise, and it produces something your existing website almost certainly does not have.

  1. What this is. The Dale & Son year-end party, Friday 12 December, 6pm, at the yard.
  2. Who it is for. Customers, suppliers, and anybody who has had us out this year.
  3. The one thing a visitor should do. Tell us they are coming, and how many.
  4. Five facts. Date, time, address, what is laid on, and when they need to reply by.
  5. What we do not do. No ticket price, no payment, no account to create.
  6. How it should feel. A note pinned to the door, not a corporate invitation.
  7. What it must not say. Nothing about “celebrating an incredible year”.

Then add the line that makes it work with no website behind it:

The signup button must be a mailto link to my own email address, with the subject already filled in. No forms, no server, nothing to sign up for. Ask me for my email address before you build it.
The whole thing as one prompt, ready to paste

If you would rather not write the brief out by hand, paste this instead and answer the questions it asks you.

I run a small business that already has a website, and I want a separate one-page signup for an event we are putting on. Interview me first. Ask one question at a time - what the event is, when and where, who it is for, what is laid on, and when people need to reply by. Nothing technical. Then build it as a single index.html in this folder. One file, plain HTML and CSS, works on a phone. The signup button must be a mailto link to my own email address with the subject line already filled in. No form, no server, nothing for me to maintain. Ask me for my email address before you build it.

It will come back and ask you about your event. Answer in plain sentences. When it is done, click the button yourself before you show anybody — your mail app should open with the subject already written.

Use your real email address. A mailto link needs no database, no hosting account and nothing to maintain — it just opens the visitor’s own mail app with the subject already written. Most people assume a signup form needs something they cannot afford. It does not.

The rule, and the joke

Nowhere in that file does anybody name a colour, a font, a framework or a layout. If you have written “use React”, or anything like it, take it back out and ask yourself why it was in there. The answer is almost always that you heard the word somewhere.

Give this twelve minutes and then move on, even unfinished. It is the stop people lose an hour to, because writing about your own business turns out to be enjoyable. The brief can keep growing all week; the rest of the trail cannot wait for it.

6

Build it, badly, in front of everybody

1:00 · 20 min

Twenty minutes and a page exists. It will not be beautiful. It will have your phone number on it, your words, your opening hours — or the date of your party and a button that actually works — and it will be yours in a way that a template from a website builder never is.

Why it matters to a business You may well have been quoted four figures for this and have been putting it off for two years. Watching it appear in twenty minutes changes what you think is possible, which is the real product of the session.
Lab D — The page appears

Paid Ask for it

One message:

Read brief.md. Build a single-page website as index.html in this folder. One file, no build step, no frameworks. Plain HTML and CSS in the one file. Make it work on a phone. When you are done, tell me what you assumed that was not in the brief.

That last sentence is the one worth stealing. It hands back a list of every gap in your brief, which teaches stop 5 better than stop 5 managed to.

Free Paste for it

  1. Copy all of brief.md into the chat tab.
  2. Underneath it, paste the same instruction as above, and add: give me the complete file in one code block.
  3. Copy the code block. In VS Code press Ctrl+N (Cmd+N on a Mac) for a blank file, paste, then Ctrl+S and save it as index.html in your folder.

The event version

Identical instruction, one word changed: build a single-page signup as index.html. Everything else — one file, no frameworks, works on a phone — stays the same. When it comes back, click the button: your mail app opens with the subject already filled in.

Watch If you are watching rather than building

Read the instruction before you send it and guess what will come back. Then send it. If it comes back slightly wrong, so much the better — watching it get fixed in one plain sentence teaches more than watching it work first time.

Now look at it

  1. In the left-hand panel, right-click index.html → Reveal in File Explorer, or Reveal in Finder on a Mac.
  2. Double-click it. It opens in the browser. That is a website, sitting on your own machine.

This is the loudest moment of the session. Take ninety seconds over it — you asked for a thing in plain English and the thing exists.

Seeing it the way the internet will — a local preview server

Look at the address bar. It says something like file:///C:/Users/you/Documents/…. That is not a web address — it is your browser opening a file off your disk, the same way it would open a photo.

A local preview server is a small program that runs on your own machine and hands the page over properly, at an address like http://localhost:3000. Nobody else can reach it. It is your page, on your computer, pretending to be on the internet.

When the difference actually matters

For one plain HTML file, honestly, it does not. Double-clicking works and you have just seen it work. It starts to matter the moment the page is more than one file:

  • A page that loads anything else — a stylesheet, a font, an image from another folder — can fail on file:// and be fine on localhost.
  • Anything that fetches data will be blocked outright on file://. This is the one that catches people out.
  • You can open it on your phone, over your own wifi. That is the moment most people believe it.

So: it is not a thing you need today. It is the thing to know exists, for the first time something works when you double-click it and breaks when you publish it — or the other way round.

Ask for it

Start a local preview server for this folder and give me the address to open in my browser. Use whatever is already on my machine if you can. If it needs something installed, tell me what and how big before you install anything. Then tell me two things: how to stop the server again, and how to open the page on my phone over the same wifi.

It will pick something sensible — most machines already have one way or another of doing this. The last line is worth asking for every time: a server you cannot stop is a small annoyance you will meet at bedtime.

Or without a command line at all

  1. In VS Code, click Extensions in the left strip, or Ctrl+Shift+X (Cmd+Shift+X on a Mac).
  2. Search for Live Preview. Check the publisher says Microsoft before installing — there are lookalikes.
  3. Install it. Then right-click index.html in the file list and choose Show Preview.

The page opens inside the editor at a localhost address, and it reloads itself every time you save. Once you have that, you stop double-clicking anything.

One thing that catches everyone out the first time: localhost only exists on your machine. You cannot text that address to anyone — it will not work for them, and it stops working for you the moment you stop the server. Making it real for other people is Lab F.

Change one thing — by asking, not by typing

Whatever bothers you first, fix it in a sentence:

The phone number is too small and too far down. Put it at the top, big enough to read at arm's length, and make it tappable on a phone.

Reload the browser tab. And there is the thing that matters: you just described a change in the same words you would have used to a person, and the change happened. That is the skill. Everything else today is plumbing.

7

Breadcrumbs

1:20 · 12 min

Now that something exists, it can be ruined. A commit is a marked point on the trail that you can always walk back to. It is the undo — and unlike Ctrl+Z it survives closing the laptop, and it goes back weeks rather than seconds.

Why it matters to a business It is the thing that makes experimenting safe. Nobody tries anything ambitious with their livelihood if breaking it is permanent. This stop is what licenses everything you do from here on.
Lab E — Mark the trail, then walk back

If Git is not installed yet

  1. git-scm.com, run the installer, click Next through every screen. The defaults are right and there are a great many screens.
  2. Close VS Code completely and reopen it. It only notices Git at startup. This one step causes more confusion than anything else in the session.
On a Mac — the same lab, start to finish

Git may already be installed

  1. In VS Code, open Terminal → New Terminal and type git --version.
  2. If it prints a version number, you are done — skip to the next part.
  3. If a box appears offering to install the developer tools, click Install and wait. It is a few minutes and it needs no decisions from you.
  4. Close VS Code completely and reopen it, so it notices Git.

Everything after that is identical

The Source Control panel, Initialize Repository, the commit box, Discard Changes and Publish to GitHub all look and work exactly the same. The only difference is Cmd+S to save instead of Ctrl+S.

Drop the first breadcrumb

  1. Click the Source Control icon in the left strip — the one that looks like a branching line, third from the top.
  2. Click Initialize Repository.
  3. Your files appear under Changes. Click the + beside each one, or the + on the Changes header for all of them.
  4. Type a message in the box at the top: first version. Click Commit.

That is a marker. Whatever happens from here on, this exact point can be got back.

Break it on purpose

  1. Open index.html. Select a big chunk in the middle and delete it. Save.
  2. Reload the browser. It is broken. Enjoy the noise.
  3. Source Control → find index.html under Changes → click the curved arrow (Discard Changes) → confirm.
  4. Reload the browser. It is back.

Forty seconds, start to finish. This is the one that stops the fear: you broke it on purpose and got it back, so the next time you break it by accident you already know what to do.

Put it somewhere safe

  1. In Source Control, click Publish Branch or Publish to GitHub.
  2. Sign in to GitHub when the browser opens. Allow the extension.
  3. Choose Publish to GitHub private repository. Private for today; you can make it public whenever you want.

Your folder now exists in two places. If the laptop is stolen tonight, the work is not gone — which is a better reason to care about version control than anything anyone will tell you about version control.

Or ask for it

The clicking above is worth doing once so you know what the buttons are. After that, the agent can do it for you:

Set this folder up properly for version control, from scratch: 1. Start a git repository here. 2. Add a sensible .gitignore for a simple static website. 3. Commit everything with the message "first version". 4. Show me the log so I can see the commit. Then explain, in plain English and without jargon, what you just did and exactly how I would get back to this point if I broke something tomorrow. If you have the GitHub command-line tool available and signed in, also create a private repository and push to it. If it is not installed, show me the command that would install it on this computer, and tell me what signing in will ask me for. Show it, do not run it. If I would rather not install anything, I will use the button in VS Code instead.

The tool is called gh, and it is optional — every step above works without it. If it cannot reach GitHub, that is normal and not a failure — signing in needs your password and your own browser. Do that part with the Publish to GitHub button above.

8

Taking the wagon to market

1:32 · 15 min

Nobody buys from your barn. The file on the laptop is a rehearsal; the address you can text to somebody is the thing. And because GitHub already has the folder, publishing is a matter of pointing something at it.

Why it matters to a business You leave with a URL. Not a plan for a URL, not a quote for a URL — an address you can text to somebody tonight. That is the difference between having learned something and having something.
In the barn. Nobody buys. At the market. That is a web address.
Fig. 7 — Nobody buys from your barn. The purpose of this stop is moving the same wagon somewhere people can reach it.
Lab F — Live on the internet

Connect the accounts

  1. Go to vercel.com/signup. If you did the short list further up this page, you are already done.
  2. Continue with GitHub is the quickest, because Vercel can then see your repositories straight away. But sign in however you like — Google is fine, and it is what I use. If you sign in with Google, Vercel asks to connect your GitHub account at the import step instead, which is one extra click.
  3. Choose the Hobby plan. Free, and no card. The note below covers when to move off it.

Publish

  1. Go to vercel.com/new. If it asks you to sign in, that is normal — it is the account you just made.
  2. Find your repository in the list and click Import. If it is not listed, click the link to configure GitHub permissions and grant access to that one repository.
  3. Change nothing on the settings screen. Click Deploy.
  4. Wait. It takes about twenty seconds, and there is confetti at the end which does more for a person than it has any right to.
  5. Click the address. It is a real website, on the real internet, and anybody in the world can open it.

Text the address to somebody else, right now. Nothing makes it real like a person outside opening it.

Pro tip — Hobby or Pro? Hobby is free, takes no card, and is the right choice for today. Two things to know before you rely on it.

A hundred deployments a day. Every push to GitHub is one deployment. A hundred is a great many for one page — but if you sit down for an afternoon of small fixes, pushing after each one, you can reach it. Push once when a batch of changes is finished rather than once per word. Pro raises it to 6,000.

Hobby is for personal use. Vercel's own wording: the Hobby plan “restricts users to non-commercial, personal use only.” A page for your business is commercial. Nobody is going to switch your site off for a plumber's opening hours, and Hobby is the right way to learn this today — but once it is the address on your van, Pro at $20 a month is the honest answer, and it is the plan you are meant to be on.

Checked on vercel.com/docs, 6 October 2026. Plans change — look before you trust me.

Change it, and watch it redeploy

  1. Back in VS Code, change one word in index.html. Save.
  2. Source Control → type a message like fixed the hours → Commit → then Sync Changes.
  3. Watch the Vercel dashboard. A new deployment starts on its own.
  4. Reload the site. The word changed.
Or just tell the agent what to change

You do not have to open the file at all. Say what you want in plain English and let it do the editing, the marking and the sending:

Change the opening hours on my page to 8am to 5pm, Monday to Friday. Show me what you are going to change before you change it. Then commit it with a short sensible message, push it to GitHub, and tell me when it is done so I can watch the deployment.

That middle line is the one worth keeping. It costs you five seconds and it means nothing goes to a live page without you having seen it first.

This works whether or not you did the command-line setup below. The agent is only doing the editing and the git part; Vercel is watching GitHub and starts the deployment on its own.

And that is the shape of everything professional: from now on, saving your work is publishing your work. That loop — change, commit, live — is what a software team does all day, and you have just done it.

Or ask for it — and never click any of this again

The clicking above is worth doing once, so that you know what Vercel actually is. After that you can hand the whole arrangement to the agent, and the point of doing so is what comes after: publishing stops being a task and becomes a sentence.

This needs the Vercel command-line tool, which needs Node.js. Ask for both at once and let it check rather than guess:

I want to publish this folder to Vercel from the command line. First check whether Node.js and the Vercel CLI are installed, and tell me what you find before installing anything. If Node is missing, stop and tell me - I will install it from nodejs.org myself. If both are there, start the Vercel login and give me the link and the code it prints. I will approve it in my browser - you cannot do that part. Then run vercel whoami and tell me the name it comes back with.

That middle sentence matters. vercel login prints a short code and then waits — you open the link, sign in, and approve the code. The agent cannot sign in as you and should not be asked to. It hands you the link; you do the approving; it carries on.

Then the arrangement itself. This is the part worth having, and it takes one message:

Set this project up so that pushing to GitHub publishes it. 1. Link this folder to a Vercel project. 2. Connect that project to my GitHub repository, with main as the production branch, so every push deploys automatically. 3. Deploy it once now and give me the live address. 4. Then tell me, in one sentence, what I do from now on when I want to publish a change. Show me each command before you run it.

From that moment your entire publishing process is this, whenever you want it:

I have changed the opening hours. Commit it with a sensible message, push it, and tell me when it is live.

That is the whole loop, and it is genuinely what a software team does all day. The change goes out in about ten seconds, and you never open the Vercel website again unless something is wrong.

Pro tip — write it down once, in the agent’s own filing. If you are going to publish this way every week, the whole routine can become a skill: a short written instruction the agent follows whenever the job comes up, so you stop re-explaining it. There is a whole stop on this at 9, and it is optional.

Ask the agent to build the skill for you

There is a skill whose job is writing skills. Install it first — one line, and it comes from skills.sh:

npx skills add https://github.com/anthropics/skills --skill skill-creator

Then describe the routine in your own words and let it do the writing:

Use the skill-creator skill to build me a skill called publish-my-page. What it should do whenever I ask to publish a change: 1. Show me what changed before committing anything. 2. Commit with a short message in plain English. 3. Push to GitHub. 4. Tell me when the deployment has finished, and give me the live address. Rules it must always follow: - Never push without showing me the change first. - Never rewrite history and never force-push. - If anything fails, stop and explain it. Do not retry. Write it, then try it on one small change so I can watch it work.

After that, “publish my page” is the whole instruction, and the four steps and the three rules come with it every time — including on the day you have forgotten them.

This one is for later, not for today. Nothing above it needs it.

If Node turns out to be missing and you would rather not install it today, stop here without regret. The website route above produces exactly the same live site, and the automatic redeploy on every push works the same way — you set it up by clicking Import once instead of by asking for it.

9

Skills

Pro riders · optional
Pro riders only — completely optional, and not part of the 120 minutes

Everything before this stop stands on its own. You have a live address, an undo, and a way of asking for changes in plain English. Nothing here is needed to keep any of that working.

It is for one particular rider: somebody who got to the end, enjoyed it, and now wants to build something bigger than a page — a real application other people pay to use. If that is not you, or not you yet, skip it with a clear conscience. It will still be here when it is.

A racehorse at full gallop, a jockey in red silks and white breeches crouched low over its neck
Fig. 8 — Same horse, same tack. A different pace, and a rider who has done it before.

For pro riders

Skill level — advanced

Every other stop on this page was written for somebody who had never opened a code editor. This one is not. It assumes you finished the trail, kept going afterwards, and are now comfortable with a folder, a terminal, and an agent writing files into a real project.

If that is not where you are, nothing is lost by leaving it. Come back when a one-page site stops being enough.

A skill is a set of written instructions you install once, and your agent then follows whenever the job calls for it. Not a program — a folder of markdown that teaches the agent how you want a particular kind of work done. Two of ours do most of the heavy lifting for anyone building a real application.

Both live at github.com/brainit-consulting/skills, with the full documentation. They work in Claude Code, Codex, Cursor, Gemini CLI and Copilot.

start-an-app

Interviews you about what you actually want to build, then scaffolds a working full-stack Next.js app around it — database, sign-in, uploads, payments, AI, landing page and dashboard. The interview is the valuable part; the scaffold is meant to look like your app from the first commit, rather than a template you then have to fight.

If stop 5 landed — that describing the job well is most of getting what you wanted — this is the same idea with a much bigger engine behind it. It asks seven technical questions and every one has a recommended default, so “whatever you recommend” is a complete answer.

Install it:

npx skills add brainit-consulting/skills --skill start-an-app

Then open an empty folder — the app is built where you start it, and it will stop rather than scaffold over an existing project. Say what you want, or run:

/start-an-app

security-scanner

An OWASP Top 10:2025 audit of any codebase, in any language — CWEs and detection patterns, severity scoring, and a dated report written to audit/ with the file, the line, the evidence and a fix for every finding.

It is here for one blunt reason: start-an-app checks that what it built works, never that it is safe — and it is routinely used to build apps holding a small business’s customer records. Run it once the app is real, not on the fresh scaffold: most of what the sign-in and access-control checks look for does not exist until sign-in works and there is data in the database.

Install it:

npx skills add brainit-consulting/skills --skill security-scanner

Then, in the repo you want audited:

/security-scanner

Read the report knowing that a finding is not a breach. A fresh scaffold produces mostly Low and Info — missing headers, logging that only goes to the console. Look at the Critical and High counts first, and ignore the total.

skills.sh

The directory those commands come from

npx skills add is not ours. It belongs to skills.sh, an open directory of agent skills: one line installs any of them, and the same skill works in Claude Code, Codex, Cursor, Copilot, Gemini and the rest — you are not choosing a tool when you install one.

Ours are listed there alongside Anthropic’s and Vercel’s. Worth a look when you want something we have not written — there are a few thousand, and the front page ranks them by how much they are actually used.

The thing worth knowing before you install anything: a skill is written instructions, not a program. It is a folder of plain markdown. You can open it and read exactly what it will tell your agent to do, which is more than most software lets you do.

One last thing — about the horses

Almost every horse on this page was written by hand, in code. Shapes, coordinates, curves — a few hundred lines of it. That is why they look the way they look: flat, plain, and drawn by somebody who cannot draw.

Two are not. The racehorse at the top of this stop is one of them. Here is the other, beside the hand-written version of the same animal:

Written by hand, in code
The same horse in the same colours, drawn far more finely: a mane, shading down the flank, a soft shadow on the ground
Made with the image_gen tool in Codex

Same horse, same colours, same red tack. The one on the right took a sentence.

That is the whole argument for this stop. A skill or a tool does not make the agent smarter — it gives it a longer reach. The one on the left is the limit of what an agent can do with nothing but a text editor. The one on the right is what happens when it can also draw.

You do not need to be able to draw, and you do not need to know what a bézier curve is. You need to know that the tool exists, and to be able to say what you want. That has been the lesson since stop one; this is just the loudest example of it.

Why it matters to a business The gap between “it works on my laptop” and “it holds my customers’ details” is where small businesses get hurt, and nothing in the first eight stops closes it. If you are going to keep other people’s information, run the scanner before anyone else’s data is in there.

1:47What we did not do

I would rather tell you what we skipped than let you leave thinking you have seen the whole thing.

There are twelve written sessions. This was six of them, at a canter. Here is what did not fit.

What we skippedThe one-line versionWhere it is written
The wellWhere information lives when a page is not enough — a real database, and asking it questions in English.Workshop #009
Riding the fencesAutomatic checks that catch the day you break something without noticing.Workshop #011
Who's at the gateLogins, who is allowed to see what, and sending email from your own thing.Workshop #012
Rules of the barnStanding instructions written into the folder, so the agent starts every session already briefed.Workshops #001 and #006
What it costsTokens, plans, and what a hobby project actually runs to. Which is usually nothing.Workshops #001 and #010

About the address The free address Vercel gives you — something like dales-plumbing.vercel.app — is a real web address. You can put it on a business card, text it to a customer, and it will still be working in a year. You do not need to buy a domain, and nothing in this session assumes you have one. If you later decide you want dalesplumbing.com instead, that is a small job and costs $11.25 a year through Vercel. Ask me and I will walk you through it.

All twelve sessions are written, free, and readable tonight.
Open the full series →
Nothing behind an email address.

1:52The one thing to go home and do

One instruction, small enough that you will actually do it this week.

The one thing

Before the week is out, change one true thing on the page you published. Your hours are wrong. The phone number should be bigger. There is a job you keep being asked for that is not on the list.

Ask for the change in plain English, the same way you did at stop six. Commit it. Watch it go live.

That is the loop, start to finish — once with me standing next to you, and once on your own. Everything else, the databases and the logins and the checks, is that same loop with more furniture round it.

And if the horse throws you: it is a horse, not a mirror. It did not decide you are stupid. Get back on and say the thing differently.

It threw you. Get back on and say it differently.
Fig. 9 — It is a horse, not a mirror. It did not decide anything about you, and it will carry you just as well on the second attempt.

One last thingThe horse works for sugar

Everything today ran on something, and nobody has told you what. It is the least mysterious part of the whole business.

Every question you ask and every answer you get back is chopped into small pieces called tokens — roughly, a token is a short word, or a chunk of a long one. Tokens are the sugar. They are what you spend, whether you are spending money or spending a free plan’s allowance.

Which means a long rambling conversation costs more than a short clear one, and pasting your entire price list into every single message costs more than putting it in a file once and pointing at it. That is the only efficiency advice you need, and you will work it out on your own within a week anyway.

Tack off. Done for the day. Tack on. Work in the morning.
Fig. 10 — The sugar cubes are tokens. This is the entire pricing model, drawn.

Three things and then we are genuinely finished:

It is strong, it is fast, it will work for you all day and it does not get bored. It just needs sugar.

Before you goQuestions people actually ask

These ten come up in every session, in roughly this order.

A horse does not need you to know how it works.

Do I have to learn to code now?

No. You have just built and published a website without writing a line of it, and what made that work was describing clearly what you wanted. That is a writing skill, not a coding one.

Sugar cubes. The horse works for sugar.

Everyone keeps saying “tokens”. What is a token?

A short word, or a piece of a long one. Your question and its answer both get chopped into them, and that is the unit you are spending. A long rambling conversation costs more than a short clear one.

Both are good horses. The mistake is changing stables every week.

ChatGPT or Claude — which one should I get?

Either. They are close enough that the difference will not be the thing holding you back. Pick one, use it for a month, get good at asking. Switching every fortnight is what actually costs you.

You pay for the horse, never for the field.

What does this actually cost?

Today, nothing. The free plans do everything we did. If you end up using it most days you will start hitting the free limit, and then it is about $20 a month, flat. Hosting the site you published is free on Vercel’s Hobby plan, which is meant for personal projects — once the address is your business’s, their paid plan at $20 a month is the one you are meant to be on.

The horse can see whatever is in the paddock you put it in.

Is my stuff being uploaded somewhere?

What you type, and any file you point it at, goes to the company running the model — that is where the thinking happens. Paid business plans generally do not train on your material; free consumer plans sometimes do. If something is genuinely sensitive, check the setting on the plan you are using before you paste it, not after.

That pause at the gate is you holding the reins.

Can it delete my files?

It asks first, every time — that is the prompt you saw at stop four. And after stop seven you have a commit, so anything it does can be walked back. Those two stops are in this session for exactly this reason.

That is the horse spooking. It is not broken.

It told me something completely wrong. Is mine faulty?

No, and it will do it again. It predicts what a good answer looks like, so when it does not know something it produces a confident wrong one in exactly the tone it uses when it is right. Never take a number, a date or a legal fact on trust.

A hired wagon is not a wagon you own.

Couldn’t I just use one of those sites that builds the whole thing for me?

You could, and for one simple page it is a fair choice. The difference is that what you built today is a file you own, that you can move anywhere, that costs nothing to keep, and that nobody can put a monthly price on later.

The horse did not replace the stable hand. It gave them more ground to cover.

Is it going to replace my staff?

It is very good at drafting, looking things up and tidying, and no good at deciding, judging, or being accountable to a customer. The businesses that come unstuck are the ones that hand over the second kind by mistake.

Nobody gets on a horse gracefully the first time.

I tried this once before and closed it because it looked terrifying.

That is the most common thing anybody says to me. Almost all of it was the screen rather than the idea, and you have now been through the screen once with somebody talking you through it. Do the one small thing this week and it stops being frightening.

Plain wordsThe eighteen terms you met today

Everything else can wait. Each one closes with what it is on the ranch.

Large language model
The engine that predicts the next word, very well and very fast. The horse.
Prompt
What you type. The reins.
Token
A short word or a piece of one. The unit you spend. A sugar cube.
Context window
How much of the conversation it holds at once. Past that, the early part falls out. How far it carries before it tires.
Hallucination
A confident answer that is simply wrong. Not a fault — a side effect of guessing. The horse spooking.
Standing instructions
What you write once so every conversation starts properly briefed — a project’s instructions in the browser, or a CLAUDE.md / AGENTS.md file in your folder. Yours to read and change. The saddle.
System prompt
The instructions the maker wrote, in place before you type anything and not yours to edit. The saddle is the instructions you write; the system prompt is the ones the maker wrote. The way it was broken in.
Memory
Facts it keeps on its own between conversations. Handy, but you did not write it and cannot always see it, so the saddle is the part to rely on. What it starts to remember by itself.
Tool
Anything that lets it reach the real world: read a file, write one, run something. The saddlebags.
Agent
A model with tools and a goal, checking its own work and going round again. The loop.
Permission prompt
The pause before it changes anything. Read it rather than clicking it away. The gate.
Brief
Plain English about what you want. Never how to build it. The trail map.
Editor
The window your files live in. VS Code, in our case. The tack room.
Commit
A saved point you can always get back to. A breadcrumb.
Repository
Your folder, plus every marker you have dropped in it. The trail itself.
GitHub
Where that trail lives online, so losing the laptop does not lose the work. The second barn.
Deploy
Putting it somewhere the public can reach it. Taking the wagon to market.
Mailto link
A button that opens the visitor’s own mail app. No form, no server, nothing to maintain. A note left at the gate.

Keep this beside youWhen it goes wrong

All of this has happened to somebody. None of it needs anything clever to recover from.

What you seeWhat to do
VS Code says Restricted Mode across the topClick Manage, then Trust. It is your own empty folder, and you are the author.
claude is not recognisedThe terminal was open before the install finished. Close it, open a new one. Works every time.
“Claude Code requires a paid plan”Expected — the free account does not open it. Switch to the free browser route and carry on. It reaches the same place.
No Source Control options in VS CodeGit was installed while VS Code was running. Fully close VS Code and reopen it.
Publish to GitHub does nothingNothing has been committed yet. There has to be one commit before there is anything to publish.
Your repository is not on the Vercel import listClick Configure GitHub App on that screen and grant access to that one repository.
Vercel deploys, but the page is a 404The file must be named exactly index.html and sit at the top of the repository, not in a sub-folder.
The Vercel tool will not installIt needs Node.js 20 or newer. If Node is missing, install it from nodejs.org — or skip it entirely and use the website route, which gives the same result and the same automatic redeploys.
missing_scope from the Vercel toolYour account belongs to more than one team, so it refuses to guess which. Add --scope <your team> to the command, or ask the agent to list your teams and pick.
The site loads but looks old after a changeHard refresh: Ctrl+Shift+R. Then check the deployment actually finished.