Lesson 01: Introduction to Vibecoding

Vibecoding is building software by describing what you want in plain English and letting an AI agent write the code for you. You don't write code. You don't read code. You describe what you want and the agent builds it. You give feedback and it iterates. That's the whole loop.

The term was coined in early 2025 when AI agents got good enough to build real, functional software from natural language descriptions. Before that, AI could help with code (e.g. autocomplete a line, suggest a function) but you still needed to understand programming to build applications. Vibecoding changed that. Now the skill isn't writing code. It's describing what you want clearly enough that an AI can build it.

Think of it like hiring a contractor to build a house. You don't need to know how to lay bricks. You only need to know what you want: what kind of house, how many rooms, what style, where the windows go. The contractor handles the construction. In vibecoding, the AI agent is your contractor.

Historically, it used to cost $300K-$400K to pay an agency to build a production grade online application. Today, you can get far with $10-20 and a good description of what you want.

---

What is an AI Agent?

You've probably used ChatGPT or another chatbot. You type a question, it gives you an answer. That's a chatbot. It responds to prompts with text.

An AI agent is different. An agent doesn't just respond, it acts. You give it a task, and it does work to complete that task. It creates files, writes code, makes decisions, runs commands, fixes errors, and asks you questions along the way. Think of chatbots vs. agents like asking someone for directions vs. hiring someone to drive you there.

When you vibecode, you're working with an AI agent. You say "build me a personal website with a dark theme and links to my socials." The agent will then create the project folder, write the HTML, CSS, and JavaScript, set up the layout, pick the fonts and colors, and show you the result.

You never touch the code. You're the creative director. The agent is the entire engineering team.

---

The Tools

There are two main AI coding setups you'll use in this course:

Replit - a browser-based coding environment with a built-in AI agent. Nothing to install, everything runs in the cloud. The free tier is enough to get started.

OpenAI Codex - a terminal-based AI agent you install and run on your own machine. Codex is free to use up to a certain point, after which you'll need to pay for more credits.

If you already have a paid Claude subscription, you can also use Claude Code instead of Codex. It's another terminal-based agent (made by Anthropic) and works the same way.

Both paths do the same fundamental thing: you describe what you want, the agent writes the code. Your choice mostly comes down to whether you'd rather work in a browser (Replit) or a terminal (Codex or Claude Code).

---

Important: AI Agents Can Be Dangerous

Most people run AI agents on their local machine: the same one that has your files, your photos, your passwords, and anything else you've saved. When the agent is working, it browses the internet, reads files, and processes code from external sources. Any of that content could contain a prompt injection: hidden instructions designed to hijack the agent. If it reads one, the agent will follow those instructions without you knowing, and it has full access to everything on your computer.

This isn't hypothetical. It's a known, active attack that security researchers have no reliable fix for yet.

What is Prompt Injection?

You've heard of phishing: a fake email pretending to be your bank to steal your login. Prompt injection is the same idea, but for AI agents. Instead of tricking you into clicking a link, an attacker embeds hidden instructions inside something your agent will read. When the agent processes it, it follows those instructions as if you wrote them yourself. You never see it happen.

Best Practices

Run your agent in a sandbox, not on your local machine. A sandbox is an isolated environment in the cloud, separate from your personal files and anything sensitive. If the agent gets compromised inside a sandbox, the damage stays contained.

We recommend two options:

• Replit - browser-based, no setup required. Good for beginners.
• GitHub Codespaces - runs VS Code in the cloud. Requires a GitHub account.

Never give your agent real private keys, passwords, or API keys. If you hand those to an agent, consider them compromised. Always use dedicated development accounts with no real funds or sensitive access.

Treat agent output like code from a stranger. Review what it builds before deploying, especially anything that handles money or user data.

---

The Loop

Vibecoding follows a simple loop. Every project, no matter how complex, is just this loop repeated:

1. Describe - Tell the agent what you want in plain English
2. Build - The agent writes the code and creates the files
3. Review - Look at what it built in your browser
4. Feedback - Tell the agent what to change
5. Repeat - Keep going until you're happy

There is no step where you open a code file and start typing. The agent handles all of that.

---

The Skill: Prompting

If vibecoding is the process, prompting is the skill. A prompt is what you type to tell the agent what to do. The quality of your prompt directly determines the quality of what gets built.

Bad prompt:

make me a website

Good prompt:

Build me a personal portfolio website. Dark background (#111), white text, 
clean sans-serif font. Include a header with my name "Jordan", a two-sentence 
bio, a grid of 4 project cards with titles and descriptions, and a footer with 
links to my Twitter and GitHub. Make it responsive for mobile.

Same request, wildly different output. Think about what you're building, how it looks, what it does, and who it's for. You don't need to use technical language, but learning the names of common UI components helps. "Add a dropdown" is better than "add a thing that shows options when you click it."

Pro tip: Check out Component Gallery for a visual reference of every common UI component with its proper name.

---

When Things Break

Things will break. The agent will misunderstand you. The app will show a blank page. An error will pop up. This is normal. It happens to professional developers every day.

If you see an error message: Copy the entire error and paste it to the agent. Don't summarize it. The full error gives the agent context to fix it.

If something looks wrong: Describe exactly what you see.

If you're stuck: Just tell the agent. It can diagnose and fix most issues on its own.

---

What Vibecoding Can and Can't Do

Vibecoding can:

• Build websites, web apps, tools, games, dashboards, portfolios, and much more
• Handle frontend design, layout, interactivity, and styling
• Set up databases, authentication, payments, and APIs
• Fix bugs, refactor code, and add features to existing projects

Vibecoding can't (yet):

• Build everything perfectly on the first try; you'll always need to iterate
• Replace knowing what you want to build
• Guarantee production-quality code at scale without a technical review

---

What's Next

You now understand what vibecoding is, how AI agents work, and how the loop works. In the next lesson, you're going to use everything you just learned to build and ship your first app from scratch.