Project 1 · Vibe Coding with Lovable
Your first ship. Prompt → preview → public URL. No setup, no installs, no editor. Just a feel for what shipping is.
By the end of this project, you will have a small live website at a real public URL — built entirely by describing what you want in plain English to an AI tool called Lovable.
You will not write a line of code. You will not touch your terminal. You will not open VS Code. The point is not to learn React or HTML — that comes in Project 2. The point of Project 1 is to feel the shipping cycle for the first time.
That feel — "I described an idea, and it became a real thing on the internet" — is the foundation everything else rests on.
Why Vibe Coding First
You have spent weeks learning concepts. Tokens, prompts, RLS, JOINs, Tailwind classes. Concepts without shipping become abstract. Project 1 fixes that by skipping straight to the result.
Lower stakes, faster reward. The tools you set up in Phase 0 (VS Code, Node, GitHub) are powerful but unforgiving — one missing semicolon and nothing renders. Lovable hides all of that. You describe a site, you see it, you change your mind, you describe the change, you see the change. The loop is seconds, not minutes.
Build intuition for what prompts can do. By the end of this project you will have written 20–40 prompts to Lovable. Some will work great. Some will produce nonsense. You will start to feel the difference between a prompt that gives the AI enough context and one that does not. That intuition is the single most valuable skill in this entire training — it carries directly into Claude Code, into Project 2, into every real project after.
Ship something small and real. Most people who try to learn coding never finish anything. Project 1 makes finishing easy — there is no syntax to debug, no deploy step to fail. You decide the site is "done enough," you click publish, you have a URL. That single experience changes how you approach Project 2.
Then you'll know what Lovable can't do. Vibe coding is not magic. Around 80% of what most small sites need, Lovable can do well. The remaining 20% — when you need a database row to update in response to a payment webhook, when RLS policies need to be exact, when a complex flow needs precise control — is where you graduate to the real stack. Project 1 ends with that boundary clearly visible.
What You Will Build
A small site for your own school (real or fictional). One page is enough. Two to three pages is great.
The school is the running case study for the rest of the training, so building the first version of "your school online" in Project 1 means Project 2 and Project 3 build on something you have already shipped — not a new context every time.
If you do not have a real school, invent one. Pick a name, a city, two or three branches, a tagline. Keep notes — you will reuse this fictional school for the next two projects too.
The minimum scope is one page with:
- Hero with school name, tagline, and a "Learn more" CTA
- About section — 2–3 paragraphs about the school
- A list of branches (or programmes if a single-campus school)
- A contact section with a phone, email, and address
If you want to push further (encouraged but not required):
- A separate "Branches" page with a card per branch
- A simple "Admissions" page with the steps to apply
- A photo gallery
That's it. No login. No database. No fee payment. Project 3 has all of that — Project 1 is just the front door.
What You Will Practice
- Prompt iteration. You will phrase the same intent five different ways, see five different results, and learn which phrasings give you what you want.
- Sequencing changes. Big-bang prompts almost always disappoint. You will learn to break "make me a school website" into 8–12 small, incremental prompts.
- Owning the brand. You pick colours, fonts, tone. You make 50 micro-decisions about what the school looks and feels like.
- Reading what the AI built. Even though you did not write the code, you will look at the result and judge: "Is this what I wanted? What should change?" That judgment is exactly the skill Project 2 needs.
- Shipping. Publish, share the URL with one real person, ask what they think, iterate. That feedback loop is what makes shipping addictive.
How Long This Should Take
Plan for 3–6 hours, spread over a weekend.
- 30 min — sign up for Lovable, get oriented
- 1–2 hr — first version of the home page
- 1 hr — iterate the design, fix what looks off
- 30 min — add the second and third pages if you choose
- 30 min — publish and share
If you find yourself at hour 8 still tweaking, stop. Project 1 is not where you make a perfect website. It is where you ship one and move on. You will rebuild the same school site properly in Project 2 — this is the warm-up.
After Project 1
You will know what Lovable feels like. You will know what good prompts look like. You will have a live URL you can show anyone. And you will be ready for Project 2 — where you rebuild the same school website from scratch on the real stack (Next.js, Tailwind, Vercel, GitHub) and start to understand what was happening behind the Lovable curtain all along.