What Vibe Coding Is and Your First App

What Is Vibe Coding?

Vibe coding is a term coined by AI researcher Andrej Karpathy in early 2025. The idea: instead of learning programming syntax and spending hours debugging, you describe what you want in plain English and let AI write the actual code. You stay in the "what." AI handles the "how."

Traditional coding requires you to know the syntax, the libraries, the file structure, the error messages. Vibe coding outsources all of that. You are the product manager and the AI is your developer.

The core loop

Every vibe coding session follows the same pattern:

1. Describe — Write a prompt explaining what you want
2. Generate — AI writes the code
3. Test — Run it and see if it works
4. Refine — If something's off, describe the fix in plain English
5. Repeat — Keep iterating until it's right

That's it. No Stack Overflow. No documentation marathons. No "why won't this work at 2am." Just natural language and iteration.

The Four Tools You Need to Know

There are dozens of AI coding tools, but four are worth knowing in 2026. Here's an honest take on each.

Cursor — Best for iterative coding

Cursor is a code editor built entirely around AI. You open it, describe what you want to build, and it generates the files. When something's broken, you tell it what's wrong and it fixes it. It has a free tier that's generous enough to complete this course.

Claude Code — Best for complex reasoning

Claude Code is Anthropic's AI coding agent. It can manage entire codebases, run commands in your terminal, and handle multi-file projects. It's stronger than Cursor for complex logic but requires a terminal and an API key. We use it on Days 3–5.

Replit — Best for instant deployment

Replit is a browser-based coding environment. You describe your app, it builds it, and you can share the live URL immediately. Zero setup. Great for beginners because there's nothing to install.

v0.dev — Best for UI components

v0.dev by Vercel is purpose-built for generating user interfaces. Describe a component — "a navigation bar with a logo on the left and three links on the right" — and it generates clean, copy-pasteable React or HTML code instantly.

Build Your First App: A To-Do List

We're going to build a to-do app. Not because it's glamorous, but because it covers all the fundamentals: creating items, displaying a list, marking things done, deleting them. If you can build this with AI, you can build almost anything.

Step 1: Open Cursor and start a new project

Open Cursor. Click "New Project" and create an empty folder called todo-app. Open the AI chat panel (Cmd+L on Mac, Ctrl+L on Windows).

Step 2: Write your first prompt

Type exactly this into the chat box:

Build me a to-do app as a single HTML file. Requirements:
- Add tasks by typing in an input field and pressing Enter or clicking Add
- Each task shows a checkbox to mark it complete (strikethrough when done)
- A delete button on each task to remove it
- Tasks persist in localStorage so they survive page refresh
- Clean, modern design with a white card on a light gray background
- A counter showing how many tasks are remaining
No frameworks. Pure HTML, CSS, and JavaScript only.

Hit Enter. Watch Cursor generate a complete index.html file. It will write all the HTML, the CSS styling, and the JavaScript logic — probably 80–120 lines of code — in about 10 seconds.

Step 3: Open the file in your browser

Right-click the index.html file in Cursor's sidebar and choose "Open in Browser" (or drag the file into Chrome). You now have a working to-do app.

Step 4: Iterate with follow-up prompts

Here's where vibe coding gets powerful. Don't accept the first result — improve it with natural language. Try these prompts one at a time:

# Try these one at a time — each improves the app

Add a "Clear completed" button that removes all checked tasks at once.

Add the ability to set a priority (High/Medium/Low) for each task.
Show the priority as a colored dot next to the task text.

Add a filter: buttons for "All", "Active", and "Completed" tasks.

Make the design feel more polished. Use a blue accent color,
smooth animations when tasks are added or removed, and a
subtle shadow on the card.

Each prompt builds on the last. The AI remembers the existing code and adds to it. This is the iterative loop — the entire foundation of vibe coding.

What AI Actually Generated

You don't need to understand every line — but it helps to know what's in there. Open your index.html file and you'll see three sections.

HTML — the structure

The HTML is the skeleton: input fields, buttons, the list container. Think of it as the blueprint.

CSS — the design

The CSS handles all the visual styling: colors, fonts, spacing, animations. If you want to change how something looks, describe it in plain English and AI will update the CSS.

JavaScript — the behavior

JavaScript is what makes things interactive: adding tasks to the list when you press Enter, saving to localStorage, filtering by status. This is the part that would take a beginner weeks to learn from scratch — you got it in 10 seconds.