§ 01
One-Page Snapshot
Course Overview
A trainer should be able to read this single section and know exactly what they're teaching, to whom, and why.
Session Title
Vibe Coding 101: Build Your First Single-Page App With AI
What This Session Is About
Learners use Lovable to build a single-page app one prompt at a time. The session teaches the core principle "One Prompt, One Action."
Why It Matters
Small, scoped prompts reduce ambiguity and protect existing code from accidental AI rewrites. The pattern learned in Lovable transfers directly to Gemini Canvas, Replit, Codex, and GitHub.
Intended Audience
Beginners. No coding background required. No prior AI experience required. Built for learners who have never opened an AI coding tool before.
⚑ TODO · NEEDS INPUT FROM MOEZ — Does the alpha cohort skew high-school students, working adults, or mixed? Vocabulary, examples, and pacing in Sections 03–04 shift depending on audience age.
Skill Level
Absolute beginner. Anyone comfortable typing in a browser can participate.
Tools Used
Lovable, in Chrome or Edge. One computer with reliable internet per learner.
⚑ TODO · NEEDS INPUT FROM MOEZ / HASSAN — Confirm Lovable tier. Free-tier daily prompt limits and project caps may constrain the live build across a cohort. Confirm tier and pre-session signup steps before alpha test.
Total Time
120 minutes (2 hours).
Accessibility
Slides 20pt minimum, high contrast. Every prompt example read aloud in full. Printed Prompt Template Handout for learners without devices. Captions on if recording. Extra practice time for slow typists or assistive-input users — offer to pair them. Demo screen zoomed to 125% so the back row can read.
Learning Objectives
By the end of this session, learners will be able to:
- Identify the visual, interaction, and data blocks of a single-page app.
- Write a prompt using the Action + Target + Constraint + Preservation Rule formula.
- Apply the "One Prompt, One Action" principle to add one feature at a time.
- Use the preservation phrases "Do not redesign the page," "Keep existing functionality unchanged," and "Make the smallest change possible" to protect working code.
- Build a working single-page app in Lovable, starting from a hero banner.
- Run the workflow loop on their app: Prompt → Generate → Inspect → Test → Improve → Commit.
- Recognize how the workflow transfers to Gemini Canvas, Replit, Codex, and GitHub.
Core Principle
Small, scoped prompts beat one giant prompt. Every time. Lovable predicts from your prompt plus the current code context — so build features one prompt at a time, tell it what not to touch, and inspect what it generated before writing the next one.
One Prompt, One Action — the session's center of gravity
§ 02
Minute-by-Minute
Run of Show
Learner practice is the deliverable — protect it. Never cut Lesson 1 practice or the Lesson 2 demo.
| Time | Type | Topic / Activity | Trainer Cues |
|---|---|---|---|
| 0–8 min | Hook | Welcome + Hook Question Greet learners. Confirm Lovable is open on every screen before you start. Ask: "How many of you have tried to build an app and ended up with something you couldn't fix?" Quick show of hands, no discussion. |
Transition: "Today we're going to build a real app, one prompt at a time. Let me show you what that means." |
| 8–18 min | Lecture | SPA Anatomy + the Prompt Formula Walk the three block types: visual, interaction, data. Teach the formula: Action + Target + Constraint + Preservation Rule. State the principle "One Prompt, One Action." |
Keep this under 10 min. The demo is where the lesson lives, not here. Transition: "Watch what this looks like in Lovable." |
| 18–28 min | Demo | Lesson 1 Live: Hero Banner "Create a single-page app for a student coding club. Add a hero banner with a headline, subheadline, and one call-to-action button. Do not add any other sections yet." |
Type slowly so learners read along. Don't narrate while Lovable generates. After: "What do you notice?" Point at the constraint and ask why it mattered. |
| 28–45 min | Practice | Learners Run Lesson 1 Each learner runs Lesson 1 in their own Lovable project. |
Walk the room. Peek at screens. Ask quietly: "What prompt did you write?" Redirect learners who add extras beyond the hero to the constraint. |
| 45–48 min | Discussion | Quick Share-Out + Check for Understanding Thumbs up if a hero banner appeared. Thumbs sideways if it generated something different. One or two volunteers read their CTA button text aloud. |
Reset energy before the next demo. Transition: "Next we add a navbar AND a second button without breaking the first one." |
| 48–58 min | Demo | Lesson 2 Live: Navbar + Second CTA "Add a navigation bar with a logo on the left and three links on the right: Home, Projects, Contact." Then: "Add a second button in the hero section called 'View Projects.' Keep the existing button unchanged." |
Pause after the second prompt and point at "Keep the existing button unchanged." Show the original CTA is still there — the preservation phrase doing the work. |
| 58–76 min | Practice | Lessons 2 + 3 Learners run Lesson 2, then Lesson 3: "Add a three-card section below the hero. Each card should explain one benefit of learning vibe coding: speed, creativity, and iteration." |
If a learner's navbar prompt replaced their hero CTA, that's your teaching moment. Point at the missing preservation phrase out loud so the whole table hears. |
| 76–91 min | Practice | Lessons 4 + 5: Form + Display on Submit "Add a simple contact form with name, email, and message fields. Do not connect it to a database yet." Then: "When the form is submitted, display the submitted message below the form using front-end state only. Do not use a backend or database." |
The two "do not" constraints are the teaching point — call them out as you walk. Many learners will be surprised the form works without any backend. |
| 91–102 min | Practice | Lesson 6: Fade-In Animation "Add a subtle fade-in animation to the feature cards only. Do not change layout, text, or form behavior." |
Before they hit send, ask: "What might Lovable change if you dropped the second sentence?" Let them predict, then run. Pull any rewritten form onto the projector as the live example. |
| 102–112 min | Pair Activity | Share Apps With a Neighbor What worked, what Lovable rewrote, one preservation phrase you'd add next time. Two rotations, ~2.5 minutes each way. |
Listen for "Lovable changed my hero when I added the form" — that comment is gold for the recap. Pull one example onto the projector if you can. |
| 112–120 min | Q&A | Recap + Open Q&A Three things to remember: "One Prompt, One Action," the formula (Action + Target + Constraint + Preservation Rule), and the three preservation phrases. |
If quiet, seed: "A question I get asked a lot is, 'What do you do when Lovable starts redesigning the page on you?'" Close: "Open Lovable tomorrow and add one more feature, one prompt at a time." |
If You're Behind
⏰ Cut the Pair Activity first. If still tight, drop Lesson 6 (fade-in animation) and cover it verbally in the recap. Never cut Lesson 1 practice or the Lesson 2 demo — the preservation phrase teaching in Lesson 2 is the whole reason this session exists.
Common New-Trainer Mistake
💡 Don't narrate the demo while Lovable is generating. Stay silent while the AI streams. Learners need to watch the workflow loop happen in real time — that's what makes "One Prompt, One Action" click. Talk only after the output finishes, then ask "What do you notice?" rather than telling them what they saw.
§ 03
Deck Standards
Slide Deck Guide
15 slides, five chapters. The deck is a runway, not a script — speaker notes carry the weight.
Design Requirements
One main point per slide
If a slide has more than one headline, split it. Trainers should never have to choose where to look.
Visual, not text-heavy
Images, icons, and key phrases — not paragraphs. If you wrote a sentence, move it to speaker notes.
Speaker notes work for a trainer who didn't build the deck
Each note block contains: (1) the key concepts to land, (2) a plain-language explanation, (3) one analogy or example, (4) at least one check-in question, (5) the common misconception and how to address it, (6) a timing cue.
Timing cues in speaker notes
Every note ends with minutes to spend (e.g., "Spend no more than 3 mins here"). Use presenter view so cues stay trainer-only.
Flag skippable content explicitly
⏰ TIME CHECK — Skip if running behind. The cut order when time is short: Pair Share slide first, then Lesson 6 (fade-in animation).
Slide Map
Each slide maps to a Run of Show row. Lesson slides carry the prompt verbatim — learners copy from the screen.
| # | Slide Title | Run of Show Row | Main Point |
|---|---|---|---|
| 1 | Vibe Coding 101 (Title) | 0–8 · Hook | Build a real app, one prompt at a time. |
| 2 | Have You Ever Built an App You Couldn't Fix? | 0–8 · Hook | The hook question; quick show of hands. |
| 3 | What Is a Single-Page App? | 8–18 · Lecture | Every SPA is built from visual, interaction, and data blocks. |
| 4 | The Prompt Formula | 8–18 · Lecture | Action + Target + Constraint + Preservation Rule. |
| 5 | One Prompt, One Action | 8–18 · Lecture | Small prompts beat one giant prompt. Every time. |
| 6 | Lesson 1: Hero Banner | 18–28 Demo · 28–45 Practice | The Lesson 1 prompt, verbatim. |
| 7 | Quick Check: Did Your Hero Appear? | 45–48 · Discussion | Thumbs check + read your CTA aloud. |
| 8 | Lesson 2: Navbar + Second CTA | 48–58 Demo · 58–76 Practice | Both Lesson 2 prompts; preservation phrase highlighted. |
| 9 | Lesson 3: Three-Card Section | 58–76 · Practice | Speed, creativity, iteration — one card each. |
| 10 | Lesson 4: Contact Form | 76–91 · Practice | The form prompt; "do not connect it to a database yet." |
| 11 | Lesson 5: Display on Submit | 76–91 · Practice | Front-end state only. No backend. |
| 12 | Lesson 6: Fade-In Animation | 91–102 · Practice | Cards only — "do not change layout, text, or form behavior." |
| 13 | Pair Share: What Did Lovable Rewrite? | 102–112 · Pair Activity | Share your build; surface preservation gaps. |
| 14 | Three Things to Remember | 112–120 · Q&A | The principle, the formula, the preservation phrases. |
| 15 | Questions / Thank You | 112–120 · Q&A | Open Q&A and the closing line. |
§ 04
Contingency Plans
What Could Go Wrong
Anticipate problems before they happen. The recovery is your job — the plan is ours.
Demo tool crashes
Switch to the backup screenshots from Section 05's Tier 2 recovery. Stay calm: "The tool hiccupped, which is actually a great moment to talk about backup plans." Walk the screenshots in the same narration order. Don't apologize repeatedly — real-world imperfection builds credibility.
Tech / internet / login issues
A learner who can't sign in pairs with a working neighbor: "Sit with them. Watch them prompt. Take notes on their preservation phrases." If the room's internet is fully down, walk the six lesson prompts verbally and have learners write the preservation phrases they'd add to each. The thinking work still happens without Lovable.
Running behind on time
Cut in this exact order: Pair Activity first, then Lesson 6 (cover it verbally in the recap). Never cut Lesson 1 practice or the Lesson 2 demo. Tell the room: "We're going to be efficient on the next section so we can keep the practice time intact."
Finishing too early
Fast finishers add a custom prompt using the full formula. Walk the room: "What is one feature you want that we did not build today? Write the prompt for it." Ending on time or slightly early beats rambling — don't pad with unprepared content.
Learners confused / not following
Use Section 07's confusion table for the specific behavior. If more than half the room is stuck after five minutes, pause and remodel a new example live with a different topic: "Let me try that again a different way." Don't push forward through visible confusion.
Quiet room, no one answering
Seed with a vibe-coding example: "A question I get asked a lot is, what do you do when Lovable starts redesigning the page on you?" Then: "Does that match what you experienced?" Still quiet? Switch to table-of-four discussions — lower stakes per person.
Disruptive or disengaged learner
Give them a role instead of a confrontation: "Can you keep an eye on the preservation phrases as we go? Tell me when I miss one." Or: "You spotted that fast — help me explain it to the table behind you." Engagement beats confrontation.
Lovable rewrites a learner's working code irrecoverably
Treat it as a teaching moment for the whole room. Open version history with the learner and roll back. If unavailable, write a corrective prompt together: "Restore the [feature] to what it was before the last prompt. Keep the rest unchanged." Then point at the original prompt and name the missing preservation phrase: "This is exactly why preservation phrases exist." A live failure recovery is one of the strongest teaching moments of the session.
§ 05Pre-Flight
Before the Session
Before the Session
- Test Lovable login on the actual presentation machine; create a fresh test project end to end
- Verify the preview pane is legible on the projector at 125%+ zoom
- Download both demos' backup screenshots offline
- Test the room's internet on the actual network, not your hotspot
- Open all session tabs before learners arrive: lovable.dev, the handout, the recap link
- Read all speaker notes end-to-end
- Practice both demos with a timer, at least twice
- Know the cut order: Pair Activity first, then Lesson 6
- Review the "What Could Go Wrong" scenarios, especially the irrecoverable-rewrite recovery
- Arrange seating for collaboration — clusters of 4 or pairs, not auditorium rows
- Print or share the Prompt Template Handout
- Turn captions on if recording
- Confirm accessibility needs from Section 01