Setting Up Your Workspace

Let's Get You Set Up

You know what vibe coding is. You know the workflow: describe, build, test, refine. Now let's get your workspace set up so you're ready when the real building starts in Module 5.

In this lesson, you'll set up your AI coding tool, take it for a test drive with a tiny project, and learn about other building approaches that exist beyond this course. By the end, you'll have a working workspace and the confidence that this process actually works.

Your Workspace: Replit

For this course, you're going to use one tool: Replit. Replit is a website where you can build, preview, and share projects entirely in your browser — no downloads, no installations. It has a built-in AI assistant that writes code for you when you describe what you want, and a live preview that updates as you build.

We picked Replit because it's free for the kind of projects you'll build, it works the same on any computer, and the workflow you'll learn here transfers to every other modern coding tool. Stick with Replit through Module 7 — switching tools mid-course is the #1 way kids get stuck.

Set up your account (parent help recommended for first-time signup)

Replit requires users to be 13 or older, and the signup form usually asks for an email and either a parent's email confirmation or a parent-supplied account. Pause here, get a parent, and create the account together. It takes about 5 minutes.

1. Go to replit.com and click Sign up.
2. Create a free account using your email (or sign in with Google if your parent prefers that — fewer passwords to remember).
3. You may be asked your age and to confirm a parent's email. Use a real one — your parent will get a confirmation message.
4. You're in. The page you land on is your Replit dashboard — the home base where all your future Repls will live.

Create your first Repl

From your dashboard, look for a button that says something like Create Repl, + New, or + Create (the exact wording changes from time to time — they're all the same button).

1. Click that button. A menu opens asking what kind of project you want to make.
2. Pick the option for a basic web project. It might be labeled HTML, CSS, JS, HTML/CSS/JS, or Static. They're all the same thing — a plain browser-based webpage.
3. Give your Repl a name (anything you want — "test-drive" works fine for now).
4. Click Create. Replit opens your new Repl. You'll see three areas on the screen: a list of files on the left, a code editor in the middle, and a preview pane on the right that shows what your project looks like as a webpage.

Your First Test Drive

Time to actually use it. You're going to build something tiny — not your real project, just a quick proof that the workflow works.

1. Open the AI chat panel in your Repl. Look for a panel labeled AI, Assistant, or Agent. If you don't see it, look for an AI icon on the side or top of the screen and click it. This is where you describe what you want.
2. Type this prompt (replace the bracketed parts with your real info):
   Build a personal greeting page. It should say "Hello, I'm [your first name]" in large text, with a short sentence underneath about one thing I like (I picked: [one thing you like]). Use a dark navy background and a bright purple accent color. Make it look clean and modern.
3. Wait for AI to build. Within 10–60 seconds, AI generates the code and your preview pane on the right updates to show your greeting page. If the preview doesn't update automatically, look for a Run or Refresh button.
4. Give one piece of feedback. Look at what you got and pick one thing to change. Type it into the AI chat. Examples:
   • "Make the text bigger and centered on the page."
   • "Change the accent color to teal."
   • "Add a second line under my name that says 'I'm learning to build with AI.'"
5. Watch the change land. The preview updates again with your edit. That's the full vibe coding loop — describe, build, test, refine — in two minutes.

That's it. Small, but real. You just used AI to build and modify a webpage without writing a line of code. The same loop builds your entire Module 5 project.

Other Approaches Worth Knowing

Vibe coding is the approach we use in this course, but it's not the only way people build things. Here's a quick look at other approaches you might encounter — not because you need them right now, but because a good builder knows what's out there.

All of these are legitimate ways to build things, and you might use some of them in future projects. But for this course, vibe coding gives you the best combination of flexibility, learning, and speed. You can build anything you can describe — and that's a powerful starting point.