Vibe 101 Session Flow

What this is

The session flow is the order tutors and learners follow during Vibe Coding 101.

The flow is:

Setup -> Git -> Node -> IDE -> First Project -> Plan -> Project Brief -> Design Spec -> Prompt Sheet -> Foundation -> Localhost -> Build -> Test -> GitHub -> Vercel -> Ship

Why it matters

The session can move fast, but it must not become chaotic.

This flow keeps the learner oriented and protects the most important rule: understanding is more important than speed.

What to do

Use this map:

1. Setup: confirm device, internet, accounts, and tools.
2. Git and GitHub: understand Git and create a GitHub account.
3. Node and npm: install Node and understand how it runs the project.
4. Your IDE: open the project folder, terminal, and AI assistant.
5. First Project: pick one simple website idea.
6. How to Plan: brainstorm on notepad, use ChatGPT to structure the plan, save project-brief.md.
7. Project Brief: confirm the saved brief is complete before moving on.
8. Design Spec: use ChatGPT to plan the visual direction, save design-spec.md.
9. Prompt Sheet: use the right prompt for each stage.
10. Project Foundation: create or inspect starter files only.
11. Localhost Checkpoint: run the project locally before feature work.
12. First Visible Build: build one visible section.
13. Test, Debug, Improve: test, fix, make one small change, and polish.
14. GitHub Checkpoint: save the working code online.
15. Vercel Checkpoint: deploy the project.
16. Ship: share the finished link.

Common mistakes

• Treating the map as optional.
• Letting AI skip explanations.
• Moving too fast when the learner is confused.
• Turning the session into a theory lesson instead of a build.