Docotia
Docotia
Course 3 · Free

Vibe Code 101

Building Real Software Without Learning to Code

Last updated: October 2026

If Prompt Engineering 101 taught you how to talk to AI, and Scaffolding 101 taught you how to build systems around it, Vibe Code 101 is where you use both to build actual software products.

Vibe coding is building apps and websites by having a conversation with AI instead of writing code yourself. You describe what you want in plain English. The AI writes the code. You test it, give feedback, and keep directing. The AI keeps building. That's the whole model — and it works.

The term was coined by AI researcher Andrej Karpathy in early 2025. He described it as "fully giving in to the vibes" — trusting the AI to handle the technical details while you focus on the idea and the vision. Thousands of non-technical founders have already used this approach to build and ship real products. This course will take you from zero to a live, deployed app in four weeks — no coding experience required.

· · ·

What is Vibe Coding?

Vibe coding flips the traditional model of software development. In the old model, you had to learn syntax, frameworks, and years of technical concepts before you could build anything real. In the vibe coding model, you are the director and the AI is the developer.

The mental model that matters:

Think of yourself as a CEO, not an employee. A CEO doesn't know how to lay every brick in their building — but they know what the building should look like, what it should do, and when something is wrong. Vibe coding is the same:

The skill you're actually developing isn't coding. It's:

  1. Describing ideas clearly (you already practiced this in Prompt Engineering 101)
  2. Knowing what "good enough" looks like
  3. Breaking big goals into small steps (you practiced this in Scaffolding 101)
  4. Giving useful feedback when something is wrong

None of those require a Computer Science degree.

What You'll Need

Free tools (start here — no installation needed):

When you're ready to go deeper (install on your laptop):

Free services for publishing and databases:

For making money later:

No coding experience required. All assignments in this course use Bolt.new — it runs entirely in your browser with zero setup.

The Fundamentals

1. You Are the Director — AI Is the Developer

The most important mindset shift in vibe coding: you are not trying to learn how to code. You are learning how to communicate clearly enough that the AI can build exactly what you're imagining. Every skill from Prompt Engineering 101 and Scaffolding 101 applies directly here.

2. Describe the Problem, Not the Solution

The biggest mistake beginners make is trying to tell the AI HOW to build something instead of WHAT to build.

Let the AI decide the technical implementation. Your job is to describe behavior, not code.

3. Build Feature by Feature (The Vibe Coding Workflow)

Never try to build the whole app in one prompt. Build incrementally:

  1. Start with the simplest possible version that works
  2. Test it — does it do what you expected?
  3. Add one feature at a time
  4. Fix what's broken before adding more
  5. Repeat

This is how professional developers work too — they just call it "iterative development."

4. Feedback Like a Human

When something doesn't work, describe the problem in plain English exactly like you'd tell a coworker:

The more specific your feedback, the faster it gets fixed.

5. The Vibe Coding Stack (What Powers Your App)

Every web app has the same basic anatomy:

A beginner's free stack:

You don't need to understand every layer. You just need to know it exists.

6. The Economics of Building

This is the part that makes vibe coding genuinely exciting:

The barrier to entry has collapsed. The bottleneck is now your ideas, not your technical skills.

7. Prompting for Code (Different from Regular Prompting)

Code prompting has some specific rules:

· · ·

Module 1: Your First Working App (Week 1)

Goal: Get comfortable with Bolt.new, understand the vibe coding feedback loop, and ship your first working app — even if it's small.

Resources for This Module

Assignment 1-A: Hello, Bolt

Goal: Experience vibe coding for the first time.

Go to bolt.new and type: "Build me a simple personal homepage with my name, a one-paragraph bio, and three links (one to LinkedIn, one to Instagram, one to email). Use a clean modern design with a dark background and white text."

Fill in your real info. Watch it build. Click around the preview. Does it work?

Now iterate: "Change the background color to navy blue. Make the links open in a new tab. Add a small headshot image placeholder."

Observe: What just happened? How long would this have taken to build from scratch without AI?

Assignment 1-B: The Feedback Loop

Goal: Practice the build → test → fix → improve cycle.

Build a simple to-do list app: "Build a to-do list web app. Users can type a task and press Enter to add it to the list. Each task has a checkbox to mark it complete and an X button to delete it. Completed tasks should show with a strikethrough. Clean, minimal design."

Then run three rounds of feedback:

  1. Find one thing that doesn't work the way you expected. Report it in plain English.
  2. Find one thing you'd change about the design. Ask for it.
  3. Add one feature you'd actually want: ("Add a way to mark all tasks complete at once" or "Show a count of how many tasks are left")

Reflect: What was the most effective feedback you gave and why?

Assignment 1-C: Describe Your User

Goal: See how describing your user changes the output.

Build the same basic app twice — a simple expense tracker — with two different prompts:

Version A: "Build an expense tracker app."

Version B: "Build an expense tracker app for a college freshman living on a budget. They should be able to add an expense with a category (food, transportation, entertainment, etc.), amount, and date. Show a running total and a simple bar chart of spending by category. Keep the design friendly and encouraging, not sterile."

Compare the two results. What did specifying the user add? Save Version B — it's a real tool you could actually use.

Assignment 1-D: Your First Deployed App

Goal: Put a real URL on something you built.

Take your best creation from Assignments 1-A through 1-C. Sign up for a free Vercel account (vercel.com). Follow Bolt.new's "Deploy" button to publish your app.

You should get a URL that looks like yourapp.vercel.app. Open it on your phone. Send it to a friend or family member.

That's a real app on the internet. You built it in a week.

· · ·

Module 2: Building Something Real (Week 2)

Goal: Build a more complex, multi-feature app from scratch. Practice breaking big goals into a scaffolded sequence of prompts.

Resources for This Module

Assignment 2-A: Scope Your App

Goal: Practice breaking a complete app into a buildable sequence.

Pick an app idea you'd actually use (or use this: a habit tracker, a study scheduler, a recipe organizer, a budget planner). Before touching Bolt.new, write out:

  1. What is the core thing it does? (1 sentence)
  2. Who is it for? (be specific)
  3. What are the 3–5 must-have features for a minimum working version?
  4. What would a "nice to have" version add later?
  5. What does the main screen look like? (describe it in words)

Only after you've written this should you open Bolt.new. The quality of your planning directly determines the quality of your build.

Assignment 2-B: Build Your App in Phases

Goal: Apply scaffolding to a full app build.

Using your scoped plan from 2-A, build your app in four distinct phases in Bolt.new:

Phase 1 — Core structure: "Build the basic layout and main screen. No functionality yet, just the design and navigation."

Phase 2 — Core feature: Add the single most important feature. One prompt per feature.

Phase 3 — Polish: "Make the design cleaner. Add loading states. Make sure it works on mobile."

Phase 4 — Edge cases: "What happens if the user hasn't added anything yet? Show an empty state with a helpful message. What if they try to submit an empty form? Show an error."

Reflect: How did building in phases change the result compared to trying to describe everything at once?

Assignment 2-C: Fix a Real Bug

Goal: Practice debugging — the skill that separates good vibe coders from frustrated ones.

Deliberately create a scenario that breaks your app (try something the app wasn't designed for — paste a very long piece of text, submit blank fields, click things rapidly). When it breaks, write a bug report in this format:

"When I do [exact steps], the app [what happens]. It should instead [what it should do]. Here's a screenshot description: [describe what you see]."

Give this to Bolt.new and watch it fix the bug. How precise does your bug report need to be for the AI to fix it correctly?

Assignment 2-D: Add a Database

Goal: Learn how to store data so it persists after the page refreshes.

Currently, everything you've built disappears when you refresh the page. Fix that.

Sign up for a free Supabase account (supabase.com). In Bolt.new, tell it: "I want to save the data in this app to Supabase so it persists after a refresh. Here are my Supabase credentials: [paste from Supabase dashboard]. Help me connect the app and migrate the data."

Follow its instructions. Refresh the page. Your data should still be there.

Reflect: What does "persistent data" unlock? What kinds of apps become possible now that weren't before?

· · ·

Module 3: Design, Polish & Professional Quality (Week 3)

Goal: Elevate your apps from functional to something you'd actually be proud to show someone. Learn how to make things look good and feel professional.

Resources for This Module

Assignment 3-A: The Design Makeover

Goal: Transform a functional-but-ugly app into something visually polished.

Take any app you've built so far. Ask Bolt.new to redesign it with this prompt: "Redesign the UI of this app to look professional and modern. Use a consistent color palette, good typography, proper spacing, and smooth hover states on interactive elements. It should look like something you'd pay for, not a student project. Reference the aesthetic of [pick one: Notion / Linear / Stripe / Apple] but don't copy it directly."

Before/after: Screenshot both versions. Write a sentence about what changed and why it matters.

Assignment 3-B: Mobile First

Goal: Make your app work on a phone.

Open your app on your phone. What breaks? What's too small to tap? What overflows off screen?

Write a list of every mobile issue you find. Then give them all to Bolt.new at once: "Fix these mobile issues: [list]. The app should look and work great on a phone screen."

Check it again on your phone after each fix. Mobile responsiveness is non-negotiable for any real product.

Assignment 3-C: Empty States & Error Messages

Goal: Make your app feel finished, not rough.

A professional app handles every state gracefully:

For your main app, ask Bolt.new to add proper handling for all four states. Each one should be helpful and friendly, not just a blank screen or a raw error code.

Assignment 3-D: User Accounts

Goal: Add login so users have their own private data.

Using Supabase auth, add a login system to your app: "Add user authentication using Supabase. Users should be able to sign up with their email, log in, and log out. Each user should only see their own data — not other users' data."

Test it: create two accounts and make sure they're isolated. This is the foundation of any real multi-user app or SaaS product.

· · ·

Module 4: From Builder to Founder (Week 4)

Goal: Think like someone who builds products for others. Identify a real problem, build something people would pay for, and understand the path from idea to revenue.

Resources for This Module

Assignment 4-A: Find Your Idea

Goal: Identify a real problem worth solving.

The best app ideas come from pain points — things that are currently annoying, manual, or broken. Run this brainstorm in Gemini (from Prompt Engineering 101): "Act as a startup ideation coach. Help me find a micro-SaaS idea by asking me questions about: my interests, my major, communities I belong to, things I do manually that are annoying, and things I've seen people around me struggle with. Ask me questions one at a time and help me narrow down to 3 viable ideas."

Have a full conversation. At the end: pick your favorite idea and write a one-paragraph pitch: what it does, who it's for, and why they'd pay for it.

Assignment 4-B: Build an MVP in a Day

Goal: Ship something minimal but real.

Take your idea from 4-A and build the most stripped-down version possible in Bolt.new — just the core feature, nothing else. This is your Minimum Viable Product (MVP).

The rule: if it takes more than one day to build, it's not minimal enough. Cut features until it fits in a day.

Share the link with 3 people who match your target user. Ask them: "Would you use this? What's missing? Would you pay $X/month for it?"

Their answers are worth more than any amount of planning.

Assignment 4-C: Add Stripe Payments

Goal: Learn how to charge money for your app.

This is the step that turns a project into a business.

Sign up for a Stripe account (stripe.com — free to set up, they take a small % of transactions). In Bolt.new: "Add a Stripe checkout to this app. When a new user signs up, they should be prompted to enter payment info for a $9/month subscription before accessing the app. Use Stripe's test mode so no real money is charged."

Test the full flow: sign up → payment screen → enter Stripe's test card number (4242 4242 4242 4242) → access the app.

You now know how to build a subscription business.

Assignment 4-D: Launch on Product Hunt

Goal: Get your first real users.

This is optional but highly recommended: create a Product Hunt account (producthunt.com) and submit your app from Assignment 4-B.

Write a launch post with:

Even if you only get 10 visitors, this is real experience in launching a product. Many successful SaaS companies got their first customers from Product Hunt.

· · ·

Tips for Better Vibe Coding

  1. Start smaller than you think you need to. Every experienced builder says the same thing: the first version should feel embarrassingly simple. Get that live, then improve it.
  2. Name your files and describe your app structure early. Tell Bolt.new "this app is called X and it does Y for Z users" at the start of each conversation. Consistent context = better code.
  3. Copy what works. See an app or design you like? Tell the AI: "I want the sidebar to work like Notion's" or "the card layout should feel like Linear's." Using references is not cheating — it's how design works.
  4. Save every version that works. Before making big changes, export or fork your current project. Many vibe coders have made one wrong prompt and lost an hour of work. Treat it like Save before a boss fight.
  5. When the AI gets confused, start a fresh conversation. Long chats can lead the AI to "remember" wrong assumptions from earlier. A fresh start with clear context often fixes a frustrating loop.
  6. The gap between "it technically works" and "it's good" is design. Functional apps are table stakes. What makes something people actually use is how it looks and feels. Invest time in polish.
  7. Ship before you're ready. The feedback you get from real users in one week is worth more than two months of solo building. Launch ugly. Improve based on what you learn.

Quick Reference: Key Terms

Further Reading & Resources

Key Tools

YouTube Channels to Follow

Communities

· · ·

Part 3 of the AI Fundamentals Series: Prompt Engineering 101 → Scaffolding 101 → Vibe Code 101.

← Previous: Scaffolding 101