😱 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)
- 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.
- 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.
- Make a folder for this course somewhere you'll find it again, e.g.
vibe-coding-coursein 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)
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.Watch what happens. Files appear. Text scrolls. Don't touch anything. You're watching an intern work — fast, but worth supervising.
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.
- Desktop tools: ask your AI, "How do I view this page in my browser?"
and follow the instructions (usually opening a file called
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)
- 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
- 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.