Files for the laptop — download these tonight
1. starter.zip
The folder you build live. Unzip to the Desktop as my-website. Same file the students download.
2. bbrgolf-finished.zip
The finished BBR Golf site. Your fallback if anything breaks, and the folder to drag into Cloudflare after class.
Download finished site3. bbr-badge.png
The logo you drop into images at Move 6. Rename it logo.png on the way in.
4. The slides
HTML deck, arrow keys to move, click the right half for next. PPTX copy for Google Slides if you want it.
Open the slides Download PPTX5. bbrgolf-holding.zip
The blank "nothing here yet" page. Only needed if you want to reset bbrgolf.com from the laptop: drag it into the bbrgolf project.
Download holding page6. Links
Cloudflare dashboard · bbrgolf.com · this hub · handout · homework
Pre-flight, before the TV cable goes in
- Laptop on power. Phone hotspot on and tested as a backup network.
- Sign in to Cloudflare on the laptop. Close every other tab.
- Browser zoom 150% or more. VS Code font size 18 or more (Ctrl+= a few times). Hide the bookmarks bar.
- Open in tabs, left to right: course.bbrgolf.com, the slides, dash.cloudflare.com.
- Unzip a fresh copy of
starter.ziponto the Desktop asmy-website. This is the folder you build live. Unzipbbrgolf-finished.zipnext to it as the fallback. Putbbr-badge.pngon the Desktop too. - Confirm bbrgolf.com shows the blank holding page. Confirm course.bbrgolf.com loads on your phone.
- Print or open the QR slide. Then plug in the TV.
The 90 minutes
| Min | You do (WATCH) | Open with | Students do (BUILD) |
|---|---|---|---|
| 0 | Slide 1. Finished bbrgolf.com on screen, click through four pages. Then type bbrgolf.com in a fresh tab: holding page. | "This is what we are building. Right now the address goes nowhere. In ninety minutes it will go here." | Download starter.zip from course.bbrgolf.com, unzip it. |
| 8 | Slide: domain, hosting, files, DNS. One drawing. Then Cloudflare dashboard: the domain sitting there. | "Four words, and you only have to buy one of them." | Say their domain out loud. Show it in their Cloudflare account, or say it is on the way. |
| 15 | VS Code, Open Folder, my-website. Click index.html. Then double-click the file in the folder so it opens in the browser. | "A website is a folder. That is the whole secret." | Same. Check: they see CHANGE THIS lines and "Your Business Name" in the browser. |
| 22 | Change "Your Business Name" to "BBR Golf" (there are three places: title, header, footer). Save. Refresh. | "Change, save, refresh. You will do this a thousand times and it never gets harder." | Their name in. Save. Refresh. Walk the room once. |
| 30 | Headline and sentence. Drop bbr-badge.png into images, rename to logo.png. Save. Refresh. | "Now it stops looking like a template." | Their headline and sentence. Logo if they brought one. |
| 42 | Click all five menu links. Show the same menu on every page and explain it is the same lines in every file. | "Every page carries the menu. Nothing is hidden." | Click all five on theirs. |
| 50 | about.html heading and first paragraph. golf-trips.html heading and next-outing card. Save, refresh. | "Two pages, one minute each." | Their About and Page One. |
| 62 | Contact form = homework (decided 9/5). Open contact.html, show the form on the Contact page, point at the one line that needs a key, say the handout covers it. Two minutes, then straight to the five-check test. | ||
| 64 | contact.html open in VS Code, the CHANGE THIS line with the key placeholder on screen. Then the Contact page in the browser. | "A website cannot send email by itself. One pasted line rents a mailman. That is your homework." | Open their Contact page. Nothing to type. |
| 66 | The five-check test, out loud, ticking each one. | "Before anything goes public, five checks." | Same five checks on theirs. |
| 76 | Cloudflare, Compute, Workers & Pages, Create, Pages, Drag and drop your files, Get started. Project name bbrgolf. Drag the my-website folder in. Deploy. Open the pages.dev link. Then Custom domains, add bbrgolf.com, wait for Active, reload bbrgolf.com. | "Watch the address bar." | Domain Active: same moves. Otherwise zip the folder and save it. |
| 84 | QR slide. Everyone scans. Click through the pages on the TV while they click on their phones. | "That page left this laptop, went to a server somewhere, and came back to every phone in this room. That is your website working." | Open their own site on their phone if published. |
| 90 | Last slide: change, save, refresh, drag the folder in again. Point to course.bbrgolf.com for everything. | "That is the whole job from now on." | Questions. |
If something breaks
- Internet down: the finished site folder opens locally by double-click. Teach from that. Publish step becomes a slide walk-through with the screenshots.
- Cloudflare upload fails: retry once. Then show the screenshots of the upload flow and move to the QR test using the pre-published copy already at bbrgolf.com (restore it from the fallback before class if you want this safety net; it costs the "nothing there yet" opener).
- A student is lost: pair them with a neighbor who is on the same step. Do not stop the room for one laptop.
Credential rules, said out loud at minute 8
- Only the instructor's demo account ever appears on the TV.
- Students sign into their own accounts on their own laptops. Nobody reads a password aloud or holds a phone up to the room for a code.
- The instructor never types, sees, or keeps a student's password, including family.