Course: Vibe Coding Fundamentals | Pathway: Builder | Tier: Free | Level: Beginner Estimated Reading Time: 10 minutes
Enough theory. Let's build something.
In this lesson, you're going to create a working web app from scratch using nothing but an AI assistant and your own words. By the end, you'll have a personal bookmark manager — a simple tool where you can save links, give them tags, and search through them. It's genuinely useful, and it's entirely yours.
You'll need two things:
That's it. No downloads, no installations, no accounts to create (beyond the AI assistant itself). Let's go.
Open your AI assistant and type something like this:
"I want to build a simple bookmark manager as a single HTML file. It should have:
- An input field where I can paste a URL
- An input field for a title/description
- An input field for tags (comma-separated)
- A save button that stores bookmarks in the browser's local storage
- A list below showing all saved bookmarks, with their title, URL (clickable), and tags
- A search bar at the top that filters bookmarks by title or tag
- A delete button next to each bookmark
- Clean, modern styling with a light background
Everything should work in a single HTML file with no external dependencies."
Notice what we're doing here. We're being specific about:
That last point is important. By asking for a single HTML file, we're keeping things simple. No build tools, no frameworks, no complexity. Just one file you can open in your browser.
The AI will respond with a block of code. It'll look like a lot — probably a few hundred lines of HTML, CSS, and JavaScript all in one file. Don't worry about understanding it right now (that's the next lesson).
Here's what to do:
<!DOCTYPE html> or <html>.bookmarks.html — make sure it ends in .html, not .html.txt.
Your bookmark manager should open in your browser. Try it out — add a few bookmarks, search for them, delete one. It works!
Here's where vibe coding gets fun. Go back to your AI conversation and start customising:
"This is great! Can you make these changes:
- Change the colour scheme to dark mode (dark background, light text)
- Add the date each bookmark was saved
- Sort bookmarks with the newest at the top
- Make the tags clickable so clicking a tag filters by that tag"
The AI will give you an updated version. Copy it, paste it over the old code in your file, save, and refresh your browser. Your changes should appear instantly.
Try a few more tweaks. This is the creative part — you're designing a tool that works exactly how you want it to:
Each time, you're iterating. Describing what you want, getting the result, refining. This back-and-forth is the core of vibe coding.
It might not be perfect on the first try. Maybe the search doesn't filter properly, or a button doesn't do anything. This is normal — it happens to professional developers too.
When something's off, describe the problem clearly:
"The search bar isn't working. When I type a tag name, it doesn't filter the list. The bookmarks just stay the same."
Or:
"When I click save, nothing happens. The bookmark doesn't appear in the list below."
The AI will fix it. We'll cover debugging in detail in Lesson 4, but for now, just describe what you expected to happen and what actually happened. That's usually enough.
Your bookmark manager is a single file on your computer. You can:
Because it uses local storage, your saved bookmarks are tied to the browser you're using. Different browser = different bookmarks. That's a limitation of keeping things simple. (Later courses cover how to add proper databases.)
Take a moment to appreciate what you did. You built a functional web application. It has:
In the professional world, those four things — UI, persistence, search, CRUD operations — are the building blocks of most software. You just built all of them by describing what you wanted.
After building your first project, here are patterns that consistently lead to better outcomes:
Be specific about behaviour, not implementation. Say "when I click the tag, it should filter the list to only show bookmarks with that tag" rather than "add an onClick handler to the tag elements." You're describing what you want, not how to code it.
Describe the starting state. "When the page first loads, it should show all bookmarks sorted by date" is more helpful than just "sort by date."
Give examples. "Tags should be displayed as small coloured pills, like you see on GitHub issues" helps the AI understand the visual style you're after.
One change at a time. If you ask for five changes at once and something breaks, you won't know which change caused the problem. Ask for one or two changes, test them, then ask for more.
Keep the conversation going. Don't start a new chat for each change. The AI remembers the context of your project within the same conversation. That context is valuable.
Now that you've done this once, the pattern works for anything:
Each of these follows the same process: describe clearly, get the code, save as an HTML file, open in your browser, iterate.
The more you build, the better you get at describing what you want. And the better your descriptions, the better your results. It's a virtuous cycle.
Build your own project:
You've now built two things. You're a vibe coder.
1. Why do we ask the AI for a "single HTML file with no external dependencies"?
a) Because it's the only way AI can generate code b) To keep things simple — one file you can open directly in your browser c) Because HTML is the only programming language d) Because external dependencies are illegal
Answer: b) A single HTML file is the simplest approach — no build tools or installations needed, just save and open in your browser.
2. When your vibe-coded project doesn't work as expected, what should you do?
a) Start over from scratch in a new conversation b) Try to fix the code yourself c) Describe what you expected to happen and what actually happened, then ask the AI to fix it d) Give up and try a different project
Answer: c) Clearly describing the problem — what you expected vs. what happened — gives the AI enough information to fix it.
3. What's the best approach when you want multiple changes to your project?
a) Ask for all changes at once to save time b) Ask for one or two changes at a time, test them, then ask for more c) Start a new conversation for each change d) Write the changes yourself in the code
Answer: b) Making one or two changes at a time means you can test each one and easily identify what caused any issues.

Visual overview