The twelve moves

Every step has the same rhythm. WATCH the step on the TV, done on BBRGolf.com. BUILD the same step on your laptop, with your own name. CHECK that yours matches before we go on.

Two rules for the whole class. Your domain name is yours, not bbrgolf.com. When the TV says BBR Golf, you type your name. And nobody shares a password, not even with the instructor. When you reach a login screen, you type it yourself.

  1. Today we build BBRGolf.com

    Watch
    The finished site, all four pages, on the TV. Then bbrgolf.com typed in a browser: nothing there yet.
    Build
    Download starter.zip from this page. Unzip it. You now have a folder called my-website.
    Check
    Your folder shows five .html files, styles.css, and an images folder.

  2. What a website is

    Watch
    Domain, hosting, files, DNS, drawn on one slide with bbrgolf.com as the example.
    Build
    Say out loud: your domain name, and where it is registered.
    Check
    You can point to your domain in your Cloudflare account, or you know it is still on the way.

  3. Open the folder in VS Code

    Watch
    Open VS Code first. Then File, Open Folder, choose my-website. The file list appears on the left. Click index.html in that list, inside VS Code. (Double-clicking it in the folder opens the browser instead. That is the next move.)
    Build
    Same on your laptop. No VS Code? Download it here, free, Windows or Mac.
    Check
    You can see the line that says CHANGE THIS: your business name.

  4. See it in a browser

    Watch
    Double-click index.html in the folder. It opens in a browser. This is your website, running from your own computer.
    Build
    Same. Keep that browser tab open all class.
    Check
    The page says "Your Business Name" at the top.

  5. Put your name on it

    Watch
    In index.html, change "Your Business Name" to "BBR Golf". Save with Ctrl+S (Cmd+S on Mac). Switch to the browser, press F5 to refresh.
    Build
    Type your own name in place of "Your Business Name". Save. Refresh.
    Check
    Your name is on the page. If not: did you save?

  6. Headline, sentence, logo

    Watch
    Change the headline and the sentence under it. Drop a logo file into images, rename it logo.png. Save, refresh.
    Build
    Your headline, your sentence. Your logo if you brought one, otherwise leave ours for now.
    Check
    Headline and sentence are yours. Logo shows at top left.

  7. Click every link

    Watch
    Home, About, Golf Trips, Backroad Adventures, Contact. Every page opens. Every page's menu comes back to Home.
    Build
    Click all five on yours.
    Check
    No page is missing and no link is broken.

  8. The other pages

    Watch
    Open about.html, change the heading and the first paragraph. Same in golf-trips.html.
    Build
    Your About page, your Page One. Page Two can wait for another day.
    Check
    Both pages show your words after a refresh.

  9. The contact form (homework)

    Watch
    The Contact page already has a working form. It needs one pasted line, an access key from web3forms.com. We skip this in class.
    Build
    At home: web3forms.com, enter your email, paste the key over YOUR-WEB3FORMS-ACCESS-KEY in contact.html. Change the email and phone lines too.
    Check
    Today: your Contact page opens and shows the form.

  10. The pre-publishing test

    Watch
    Five pages open. Menu works from every page. Logo shows. No "Your Business Name" left anywhere. Contact details correct.
    Build
    Run the same five checks on yours.
    Check
    All five pass. This folder is now a finished website.

  11. Publish

    Watch
    Cloudflare, Compute, Workers & Pages, Create, Pages, Drag and drop your files, Get started. Name the project. Drag the whole folder in. Deploy. A pages.dev address appears. Then Custom domains, add bbrgolf.com, done.
    Build
    If your domain shows Active in Cloudflare: same moves with your folder and your domain. If not yet: zip your folder, and do this step at home when the Active email arrives.
    Check
    Your pages.dev address loads your site, or your ZIP is saved somewhere you can find it.

  12. The final test

    Watch
    Scan the QR code on the TV. bbrgolf.com opens on every phone in the room. One person sends a message through the contact form, and it arrives on the TV.
    Build
    Open your own site on your phone, if it is published. Send yourself a message.
    Check
    You built a website today.
From now on, the whole job is: change a file, save, refresh, drag the folder into Cloudflare again. That is it.