Vibe Coding for People Who've Never Coded

What is the internet?

Think of the internet like a giant library. Every website is a book in that library. When you type a website address (like google.com), you're asking the library to find that book and show it to you.

The "book" lives on a computer somewhere in the world — called a server — that's always switched on and connected to the internet. When you visit a website, your computer fetches that book from the server and displays it on your screen.

What makes a website work?

Every website is built from 3 things. You don't need to learn them — just know they exist:

• HTML — the words and pictures (like the pages of a book)
• CSS — how it looks (the fonts, colours, spacing)
• JavaScript — things that move or change (like a button you click)

In the old days you had to write all of this by hand. Learning to do that well took years. That's what people mean when they say "I know how to code."

What is AI?

AI is a computer program that's very good at predicting what comes next — like autocomplete on your phone, but a million times smarter and better trained.

When you type a sentence describing what you want, the AI figures out what code would match your description and writes it. You describe, it builds.

So what is vibe coding?

Vibe coding = using AI to write the code for you.

You describe what you want in plain English. The AI writes the code. You open it in your browser and check it looks right. If something's off, you describe the fix. The AI fixes it. Repeat until it's done.

You never write a single line of code yourself.

What you'll build in this course

A Kanban board — a task management tool with three columns:

• 📋 To Do — tasks you haven't started yet
• 🔄 In Progress — tasks you're working on now
• ✅ Done — tasks you've finished

You'll be able to add tasks, move them between columns, and delete them. The data will save to a real database. The app will be live on the internet, at a real URL, that anyone can visit.

Pick your AI

All of these can write code. Use whatever you prefer:

Pick your editor

What is a prompt?

A prompt is just what you type to the AI — like a text message to a very smart assistant. The clearer you are, the better the result.

❌ Bad prompt:

Make me an app

✅ Good prompt:

Create a Kanban board web app using HTML, CSS, and JavaScript.
It should have three columns: "To Do", "In Progress", and "Done".
Each column should have a button to add a new task card.
Task cards should have a title and a right-arrow button that moves them to the next column.
Cards in the "Done" column should have a delete button instead.
The design should be clean and minimal with a white background and subtle card shadows.

The prompt formula

Create [what you want].
It should have [specific features].
When someone [does action], it should [result].
The design should be [style description].
Use [technology or colours if you have a preference].

The "fix it" formula

When something looks wrong, describe what you see:

The "Move Right" button on cards in the "In Progress" column is not visible.
Please make it visible and style it as a small blue button.

Starter prompt for your Kanban board

Press Cmd+L (Mac) or Ctrl+L (Windows) in Cursor to open the AI chat, then paste this:

Create a Kanban board web app as a single HTML file called index.html.

The board should have three columns: "To Do", "In Progress", and "Done".

Each column should:
- Have a bold heading at the top
- Show a list of task cards
- Have an "Add Task" button at the bottom that shows an input for typing a task name

Each task card should:
- Show the task title
- Have a right-arrow (→) button to move it to the next column
- Have a delete (×) button to remove it from the board

The "Done" column should not have a right-arrow button.

Style it with:
- Light grey (#f4f4f5) page background
- White column backgrounds with rounded corners
- Subtle drop shadows on cards
- Blue "Add Task" buttons
- Clean font (use system-ui or Inter from Google Fonts)

Store the tasks in the browser's localStorage so they persist after page refresh.

Step 1: Open Cursor and create your project

1. 1Open Cursor on your computer
2. 2File in the top menu → Open Folder
3. 3Navigate to your Desktop → New Folder → name it kanban-app → click Open
4. 4You'll see an empty file list on the left. That's your project. It's blank for now.

Step 2: Open the AI chat

Press Cmd+L (Mac) or Ctrl+L (Windows). A chat panel opens on the right. Everything you type here goes to the AI.

Step 3: Build the board with your first prompt

Copy the starter prompt from Module 3 and paste it into the AI chat. Press Enter. Watch the AI write the code — it takes 30–60 seconds. When it finishes, you'll see a file called index.html in the left panel.

Step 4: See your app in your browser

Press Ctrl+Shift+P (Windows) or Cmd+Shift+P (Mac) → type Live Preview → click Show Live Preview. Your browser opens showing your Kanban board.

Step 5: Test it

1. 1Click Add Task in the "To Do" column
2. 2Type a task name — a card should appear
3. 3Click → — it should move to "In Progress"
4. 4Click → again — it should move to "Done"
5. 5Click × — it should disappear
6. 6Refresh the page — tasks should still be there (localStorage)

Step 6: Make changes by describing them

Add a task count badge to each column heading showing how many tasks are in it.

Make the card background slightly different per column:
- To Do: white
- In Progress: light blue tint (#f0f7ff)
- Done: light green tint (#f0fdf4)

Why do we need Supabase?

Right now tasks are stored in localStorage — a small amount of memory inside your browser. Open the app on a different computer: no tasks. Clear your browser: tasks gone.

Supabase gives your app a real database on the internet. Tasks are saved there. Anyone who opens your app sees the same tasks.

Step 1: Create the tasks table

1. 1Go to supabase.com and log in
2. 2Click on your kanban-app project
3. 3Click Table Editor in the left sidebar
4. 4Click New Table
5. 5Name it: tasks
6. 6Add column: title — type text — uncheck "nullable"
7. 7Add column: status — type text — default value: todo
8. 8Leave the id and created_at columns already there
9. 9Click Save

Step 2: Allow your app to read and write tasks

1. 1In Supabase, click Authentication in the left sidebar → Policies
2. 2Find the tasks table → click New Policy
3. 3Choose Enable read access for all users → Save
4. 4Click New Policy again → Enable insert access for all users → Save
5. 5Repeat for update and delete

Step 3: Connect your app to Supabase

Get your Supabase URL and anon key from Project Settings → API. You saved these in Module 2.

Update my Kanban board to use Supabase instead of localStorage.

My Supabase URL is: [paste your URL here]
My Supabase anon key is: [paste your key here]

Changes needed:
1. Load tasks from Supabase on page load (select all rows from the "tasks" table)
2. When adding a task, insert a new row with the title and status
   (use "todo", "in-progress", or "done" as the status value)
3. When moving a task with the → button, update its "status" in Supabase
4. When deleting a task with the × button, delete its row from Supabase

Use the Supabase JavaScript library via CDN (add it as a script tag in the HTML).

Step 4: Test the database connection

1. 1Open your app in the browser and add a task
2. 2Go to Supabase → Table Editor → tasks — you should see a new row
3. 3Move the task to "In Progress" — refresh Supabase and the status should update
4. 4Open the app in a different browser tab — the task should appear there too

Step 1: Push your code to GitHub using Cursor

In Cursor, open the Source Control panel: Ctrl+Shift+G (Windows) / Cmd+Shift+G (Mac).

1. 1You'll see your changed files listed
2. 2Click the + next to each file to "stage" it
3. 3Type a commit message: my kanban app
4. 4Click the checkmark ✓ to commit
5. 5Click Publish Branch or Push
6. 6Sign in to GitHub when prompted and choose your kanban-app repository

Alternative: terminal commands

Press Ctrl+` (Windows) or Cmd+` (Mac) to open the terminal in Cursor:

git init
git add .
git commit -m "my kanban app"
git branch -M main
git remote add origin [your GitHub repo URL]
git push -u origin main

Step 2: Deploy with Vercel

1. 1Go to vercel.com and log in
2. 2Click Add New… → Project
3. 3Find kanban-app in your GitHub repos → click Import
4. 4Leave all settings as default — Vercel detects your project automatically
5. 5Click Deploy
6. 6Wait ~30 seconds

Step 3: Get your URL

When Vercel shows "Congratulations!" you'll see a URL like kanban-app.vercel.app. Click it. Your app is live.

Send that URL to anyone. They can use your board right now, from anywhere.

Step 4: Future updates are automatic

1. 1Edit your code in Cursor
2. 2Go to Source Control → stage your changes → commit
3. 3Click Push
4. 4Vercel detects the new code and redeploys in ~30 seconds