Workshop by Mac

A follow‑along guide for first‑time builders

Vibe Coding Workshop

In this workshop you will build your first real website, from concept to full deployment, just by describing what you want to build. We'll be using an open-source agent harness and AI models.

Let’s build!Prompt Builder
TIME≈ 90 minutes
BUILDPortfolio or business site
NEEDLaptop, tools, AI model
Before you start

Install these tools first

Before you start building your project, please install the required apps below. They’re all free. Apps marked Optional are nice to have, so you can skip them if you prefer. When in doubt, keep the default options on every screen.

1

OpenCode (desktop)

run open-source AI models

OpenCode homepage with the headline The open source AI coding agent

We use OpenCode, an open-source AI coding agent that works in the terminal, desktop app, and IDE extensions. For this workshop, install the desktop app (beta).

Download OpenCode Desktop

From the download page, get Windows (x64), run the installer, and launch OpenCode from the Start menu.

Optional: OpenCode also ships as a terminal app: curl -fsSL https://opencode.ai/install | bash. The desktop app is enough for today.

2

Git

to save your work to GitHub

Git homepage describing Git as a free and open source distributed version control system

Git is for code versioning, like having a backup of your code. We'll also use it to upload your website to GitHub (step 1).

Download Git

Open git-scm.com/install/windows, download the installer, and run it. Keep the default options on every screen.

3

Node.js

run website tools locally

Optional
Node.js homepage with the headline Run JavaScript Everywhere and a Get Node.js button

Node.js lets your computer run the development tools used by modern websites. Today's site is plain HTML, CSS, and JavaScript, so you can skip it. Install it if you want to preview your site locally or try package commands later.

Download Node.js

Open nodejs.org/en/download, download the Windows installer, run it, and keep the default options.

4

VS Code

your code editor

Optional
Visual Studio Code homepage with the headline The open source AI code editor and download buttons

Visual Studio Code is a free editor where you can open and look at the website files you build. You can skip it: OpenCode creates and edits the files for you, and you can still open them from your file explorer.

Download VS Code

Open code.visualstudio.com, click Download for Windows, run the installer, and keep the default options.

Follow‑along guide

The 7 steps

  1. 01

    Create a GitHub account

    GitHub is where we'll store the website you build today. A free account is all you need. We'll push your project there during the workshop so you can keep it and share it.

    Do this

    1. Go to github.com/signup
    2. Enter your email, create a password, and choose a username (this becomes part of your public profile URL)
    3. Complete the verification puzzle or code GitHub sends to your email
    4. Answer the short setup questions (you can skip optional steps; the Free tier is fine)
    5. Verify your email address if GitHub asks you to confirm from your inbox
    GitHub sign-up page with email, password, username, and country fields
    GitHub sign-up form: enter your email, password, and username, then click Create account.

    Your finished project will live in a GitHub repository (a project folder in the cloud). That lets you save your work, open it on another computer, and deploy it to Cloudflare Workers.

    TipAlready have an account? Sign in at github.com/login and make sure you know your username and password (or how you sign in with Google/Apple).
  2. 02

    Create a Cloudflare account

    Cloudflare Workers publishes your site to the internet and gives you a shareable link (e.g. your-site.your-name.workers.dev). The Free plan is enough for today's site, and it already includes HTTPS and Cloudflare's built-in security.

    Do this

    1. Go to dash.cloudflare.com/sign-up
    2. Choose GitHub as your sign-up option. This is the easiest path since you already created a GitHub account in step 1 (signing up with email and a password also works)
    3. Authorize Cloudflare when GitHub asks
    4. Verify your email address if Cloudflare sends you a confirmation link
    5. You should land on the Cloudflare dashboard. You don't need to add a domain or pick a paid plan: the Free plan is all you need. We'll deploy your site together during the workshop
    Cloudflare Workers product page with the headline Deploy serverless functions globally in seconds and a Start building for free button
    Cloudflare Workers homepage: Start building for free also takes you to the sign-up page.

    After you build your site with OpenCode, we'll put it on GitHub and connect that repo to Cloudflare Workers. Cloudflare will publish it and redeploy it every time you push a change, and you'll get a live URL to open on your phone and share with others.

    TipDon't paste secrets. Never commit passwords or API keys to GitHub or add them to your website files.
  3. 03

    Sign in to GitHub in VS Code (optional)

    If you installed VS Code, connect it to the GitHub account you created so it can publish and sync your project from the editor. Skipped VS Code? Skip this step too: OpenCode and Git can push your project to GitHub, and we'll help you sign in during the workshop.

    Do this

    1. Open VS Code
    2. Click the Accounts icon in the lower-left corner
    3. Choose Sign in with GitHub
    4. Follow the browser prompts and authorize Visual Studio Code
    5. Return to VS Code and confirm your GitHub username appears under Accounts
    VS Code Accounts menu showing Sign in with GitHub
    VS Code sign-in: open Accounts and choose Sign in with GitHub.
    TipUse the same GitHub account from step 1. If a browser window opens, approve the VS Code authorization and return to the editor when it finishes.
  4. 04

    Build your prompt

    Use the interactive prompt builder to answer a few questions about the website you want to build. It will write a personalized PRD prompt you can paste into ChatGPT: no guesswork, just fill in the blanks.

    Open Prompt Builder
    TipThe builder covers 5 website types with guided questions specific to each. It asks for a PRD only, not code, perfect for the workshop.
  5. 05

    Look, then refine

    First build won't look as you've imagined it, so refine it by giving feedback to the AI. Change one thing at a time so you can see what each request does.

    Make the headline bigger and use a warm cream background.
    Add a Contact section with my email and a button.
    The text is hard to read on phones, please fix the spacing.
    TipIf something breaks, tell the AI exactly what looks wrong. If there's an error, copy and paste the error code and ask the AI to fix it. It can usually fix it in one try.
  6. 06

    Add your real content

    Swap the placeholder words and pictures for the real thing. Paste your actual text, and upload your assets like images to your project folder.

    Do this

    1. Replace the placeholder text with your real words
    2. Upload your logo or photos, or ask where to add them
    3. Ask it to tidy anything that shifted after your edits
    Prompt · Add content
    Update the About section with this text:
[paste your bio].
Replace the placeholder images with the photos I
uploaded. Keep the same layout and style.
    TipNo photos handy? Grab free stock photos from Unsplash and Pexels and swap them in later.
  7. 07

    Deploy your website on Cloudflare Workers

    Connect your GitHub website project to Cloudflare Workers and deploy it so you get a public link you can share. After that, every change you push to GitHub goes live automatically.

    Do this

    1. Go to dash.cloudflare.com and log in to your account
    2. Open Workers & Pages, then click Create application
    3. Under Import a repository, choose GitHub, authorize Cloudflare if asked, and select your website project
    4. Keep the default settings, then click Deploy
    5. If Cloudflare opens a pull request in your GitHub repo to add its setup file, open it on GitHub and click Merge. Cloudflare then deploys your site
    6. When deployment finishes, copy your live workers.dev URL and open it to test your site
    TipChoose the GitHub repository for the website you built in this workshop. After deployment finishes, open the workers.dev URL in a private window to make sure it works.