Intro to Vibe Coding

Challenge 00about 30 minutes

Meet Your AI Copilot

Mission. Set up your workshop and build your first web page — in your browser — in the next 30 minutes.

😱 The story

Your AI assistant is like the most capable intern ever born: it writes, researches, and builds at superhuman speed. But an intern shows up on day one needing a desk, a computer, and a keycard. Today you set up the desk.

And because 30 minutes of setup with nothing to show for it is boring, you'll also build and see your very first web page before this challenge ends.

🧰 What you'll learn

  • What the "terminal" is (less scary than it looks)
  • That every project is just a folder your AI can work in
  • The basic loop of vibe coding: ask → look → ask again

📋 Before you start

  • A computer with internet
  • An AI coding assistant account (ZCode, Claude Code, Cursor, or Replit)

Part A — Open your workshop (10 min)

  1. Open your AI assistant. You'll see a place to type — a chat box with superpowers. In tools like ZCode or Cursor this lives next to your files; browser tools like Replit do it all in one window.
  2. Somewhere on screen you may see a terminal — a plain black or white rectangle with text. That is just a place where you type instructions to the computer instead of clicking. You almost never need to touch it. Your AI uses it like a kitchen: you'll see activity, that's normal.
  3. Make a folder for this course somewhere you'll find it again, e.g. vibe-coding-course in your Documents. Point your AI assistant at it (in desktop tools: "Open folder"; in browser tools: it creates one for you).

💡 The big idea: every software project = one folder. The AI can only work on the folder it's "standing in." If it seems confused, check you're both in the same folder.

Part B — Your first 10 minutes of vibe coding (15 min)

  1. Type this (change the details to you):

    Make a simple web page called "About Me" with:
    - my name in a big friendly heading
    - three fun facts about me: I make great pancakes, I've never
      seen The Godfather, and I once won a hot-dog eating contest (family edition)
    - a favorite-quotes section with 2 quotes I love
    Keep the design clean and cheerful, with a warm background color.
    
  2. Watch what happens. Files appear. Text scrolls. Don't touch anything. You're watching an intern work — fast, but worth supervising.

  3. When it finishes, look at the result:

    • Desktop tools: ask your AI, "How do I view this page in my browser?" and follow the instructions (usually opening a file called index.html).
    • Browser tools: there will be a Preview or Open in new tab button.
  4. Now the loop. Ask for one change at a time:

    Make the heading bigger and add a photo placeholder where a picture
    of me would go.
    

    Look. Then:

    Add a section called "Contact" with a fake email and a fake phone number —
    use placeholder text, not real contact info.
    

    (You'll understand why "fake" matters in Challenge 2.)

Part C — Write it down (5 min)

  1. Create a note (paper is fine) titled "My vibe coding log." Write:
    • Today's date
    • What you built
    • One thing the AI did that surprised you
  2. You'll add to this log every challenge. By the end it's proof of how far you've come.

🤖 Prompts worth stealing

  • "Explain what you just did like I've never coded before."
  • "Before you make changes, tell me what files you plan to touch."
  • "Ask me 3 questions before you start, so you build the right thing."

✅ You passed when…

  • You have a folder that contains a web page about you
  • You've seen that page in your browser with your own eyes
  • You asked for 2 changes and saw each one appear
  • You know which rectangle is the terminal (and that you can ignore it)

📚 Jargon translator

Term Plain English
Terminal A box where you type instructions to the computer instead of clicking
Folder / directory Where a project's files live — one project, one folder
index.html The "front door" file of a web page; browsers open it by default
Prompt The instruction you give the AI. Vague prompt = vague result
Preview / localhost A private, just-for-you version of your site, visible only on your machine

🆘 When it goes wrong

  • The AI asks a question instead of doing the thing. Good! Answer in plain words. It's checking, like a good intern should.
  • "I don't see any files / my page didn't appear." Ask: "Where did you save the files, and what's the exact file I should open?"
  • Everything looks frozen. Ask the AI: "Are you still working? What's the current status?" If truly stuck, close and reopen the tool — nothing is lost.
  • You're overwhelmed by all the panels. You only need two things: the chat box and (when it exists) the preview. Ignore the rest for now.