Vibe Coding 101 — Syllabus and How to Use This Course

You have an idea for an app, and an AI agent can now write most of the code for you. By the end of this course you'll have built DayBoard, a morning dashboard that shows your local weather next to your task list. It will be live on the internet, with real logins, a real database and security rules you've tested yourself. This course is for people who have never shipped a web app: product managers, designers, founders, analysts and students. Developers who are new to AI agents can move through it quickly. You won't learn to write code line by line. You'll learn to direct an agent, check its work and ship safely.

What vibe coding is, and what this course adds to it

Andrej Karpathy coined "vibe coding" in February 2025: you "fully give in to the vibes", accept every change the AI makes, and stop reading the diffs. That works for a weekend toy. It fails when real people's data is involved. In 2025 a vulnerability was recorded against sites generated by the AI app builder Lovable, because missing database access rules let anyone read and write their data (CVE-2025-48757). Lovable disputes it, saying each customer is responsible for protecting their own app's data. That is exactly the point: when an agent builds your app, securing the data is still your job.

This course keeps the speed of vibe coding and adds the habits that make it safe:

• a plan the agent follows
• save points you can roll back to
• database rules you test
• preview deploys you review
• a bill you can predict

What you'll be able to do

• Explain how a coding agent works (its loop of read, plan, edit, run, check) and where it tends to fail.
• Set up a coding agent in one of three ways: (A) Claude Code on your laptop, (B) OpenAI Codex on your laptop, or (C) Claude Code/Codex running on Grok Bot's cloud computer. Explain the safety trade-offs of each.
• Compare the leading coding agents, telling apart the harness (the program) from the model (the AI), and read benchmark sites such as Artificial Analysis without being fooled by them.
• Write a one-page spec and an AGENTS.md rules file that your agent follows, and have the agent propose a tech stack you can judge.
• Have an agent build and run a web app that calls an outside weather API, then read its changes and errors well enough to steer it.
• Use git commits as save points, and push to GitHub without leaking secrets.
• Design Supabase tables, apply them as migrations, add email login, and write and test Row Level Security policies.
• Deploy to Vercel with the right environment variables, review changes on preview links, and fix the usual deploy errors.
• Run a pre-launch security checklist, make a smoke test the agent's definition of "done", and keep agents away from production data.
• Estimate and cap what your app costs each month.
• Ship your app publicly, keep it maintained (dependency updates, framework upgrades, token rotation), and judge whether your next idea fits this stack.
• (Advanced) Hand tasks to cloud coding agents, run CI on every pull request, and set up automated AI code review with a human still deciding what gets merged.

Prerequisites

• A computer you can install software on, or the Grok Bot setup, where the agent runs on a cloud computer instead. The trade-off: your code and logins then live on a machine you don't control. On a work laptop, follow your IT team's rules; don't use this course to get around them.
• A plan that includes a coding agent. Claude Code needs a paid Claude plan. Codex is included in ChatGPT plans, including the Free plan, with tighter limits. The Grok Bot setup also needs an eligible paid Cursor plan (Premium or higher, not Plus) or a linked SuperGrok subscription, on top of the Claude or ChatGPT sign-in that Grok Bot uses to run Claude Code or Codex. The lab-setup lesson compares the plans with current prices.
• Free accounts on GitHub, Vercel and Supabase. The lab-setup lesson confirms each free plan's current limits. The optional Module 08 tools can add small usage costs, and that module flags them.
• No coding experience. You'll type some commands into a terminal; each one is given to you and explained.

The roadmap

Each module adds one step of the pipeline your app travels: agent → GitHub → Supabase → Vercel → production habits. Module 08 is an optional advanced track.

Time commitment

• Core path (Modules 00–07 and 09): about 20 hours, including the hands-on building.
• Advanced track (Module 08): about 4 more hours.

A comfortable pace is two modules a week, which finishes the core in about five weeks. Do each lesson's Practice steps the same day, while the agent session is fresh.

Using the three setups in this course

Lessons call them setup A (Claude Code on your laptop), setup B (Codex on your laptop) and setup C (Grok Bot driving Claude Code or Codex). Pick one setup in the lab-setup lesson and stick with it. You can switch later, because your project rules file travels with your code.

• Where the setups differ (installing, permissions, how you see your running app), the lesson shows each one side by side.
• Where they don't differ, the steps are written once for every setup.
• The prompts are plain English and work in all three.

How to study in LearnOS

• Quiz yourself; don't re-read. Each lesson ends with a short quiz. Practising recall beats re-reading for long-term retention (Roediger & Karpicke, 2006).
• Let missed questions come back. Any quiz question you miss is added to your flashcards. Reviewing it spread out over days helps it stick better than cramming (Cepeda et al., 2006).
• Chat with the lesson when you're stuck. Paste your exact error message into chat-with-lesson. It answers from the cited sections of the course.
• Keep a build journal in your notes: what you asked the agent, what broke, what fixed it. It's also great material for a blog post or portfolio.

The capstone

DayBoard v1, live. A public URL plus a GitHub repo (the repo can stay private), where:

• email login works on the live site
• weather loads for your saved location, and the app still works when the weather service is down
• outdoor tasks warn you when rain or extreme heat is forecast for their due day (you build this in the capstone lesson)
• user B can't see user A's tasks or location, and you've tested that
• there are no secrets in your repo
• a smoke test passes
• the README includes your spec and a monthly cost estimate
• you've added one feature of your own design, through a branch → pull request → preview → merge

Learners who finish Module 08 also earn an advanced badge: CI on every PR (enforced as a required check if your repo is public or on GitHub Pro), an AI reviewer commenting on every PR, and one feature built by a cloud agent.

What this course omits

• Hand-writing code from scratch. For that, the Web Development for Beginners course in LearnOS is the place to go.
• Mobile apps, payments and scaling. Payments get a pointer only.
• Hosts and databases other than Vercel and Supabase. The habits carry over; the clicks don't.
• Browser-only app builders (Lovable, Bolt, Replit Agent), except for comparison.
• The business side: pricing, customers, fundraising. That's covered in MBA for Vibe Coders.
• Using agents on a large existing codebase at work. That's covered in Claude Code at Work.

Check your understanding: how this course works

3 questions

1. 1.What does this course add to the original idea of vibe coding?

   Habits that make it safe to ship: a spec, save points, tested database rules, preview deploys and a predictable bill

   Using a browser-only app builder instead of a coding agent

   Learning to write every line of code by hand
   Check answer

2. 2.Which modules are required to complete the core DayBoard capstone?

   Modules 00–07 and 09; Module 08 is optional

   All modules including 08

   Only Modules 03 and 06
   Check answer

3. 3.In the Grok Bot setup, where does your coding agent run, and what's the main trade-off?

   On Grok Bot's cloud computer; your code and logins live on a machine you don't control

   On your laptop; Grok Bot only chats with you about the code

   On Vercel; it runs in the same place your app is deployed
   Check answer

Sources

• Andrej Karpathy — the post that coined "vibe coding" (Feb 2025)
• NIST NVD — CVE-2025-48757
• Roediger & Karpicke — Test-Enhanced Learning (2006)
• Cepeda et al. — Distributed Practice in Verbal Recall Tasks (2006)