Vibe coding is...

Use AI to code

1

We tell the AI exactly what we want to build.

2

The AI translates our ideas into working code.

3

We simply copy and paste that code into our workspace software.

🛠️ Tools for Vibe Coding

⚠️ Please download the tools below before proceeding to the next tab.

1. VS Code

The software workspace where you assemble and test your code.

▶Watch VS Code Install Tutorial

Download VS Code

2. AI Assistant

You may choose to use Google Gemini (web based) or download Claude Code.

▶Watch Claude Code Install Tutorial

Download Claude Code

🧠 Things to briefly know before going into the building step

💡 No need to memorise these — just briefly read through to get a general idea.

1

Prompt the AI: Describe your idea, and the AI will generate the necessary code.

2

Assemble: Copy the generated code and paste it directly into your VS Code editor.

3

Test Locally: Open the local file in your web browser to test and preview your work.

4

Publish: Once everything is working perfectly, push your project to GitHub to share it online.

🔤 New Coding Words

Before we start building, let's learn some new words!

🗣️

1. Prompt

The specific instructions you provide to the AI. It's how you communicate exactly what you want it to build for you.

🧱

2. HTML files

The foundation of your webpage. Think of it like a plain text document that organizes your text, images, and button placements, but without any styling or interactive logic attached.

🎨

3. CSS files

The design rules. This code is responsible for taking that plain HTML structure and making it visually appealing by controlling colors, spacing, and shapes.

⚡

4. Javascript

The engine behind the website. It contains all the necessary functions and logic to make buttons clickable, trigger pop-ups, and make the page truly interactive.

🔄

5. Hard refresh

A deep clean for your browser. Browsers naturally save older versions of your site to load faster. A hard refresh forces the browser to fetch your absolute newest updates. (On a Mac, press Command + Shift + R).

💻

6. Local file

A file saved privately on your personal computer. When you test a local file, nobody else on the internet can see it using a web address. It only becomes a "Live web" project once you publish it.

📱

7. UI (User Interface)

The visual layout that users directly interact with. It encompasses everything you can see, touch, and click on the screen, representing the final polished look of your project.

⚡ How to Vibe Code

Here is the exact action sequence you will use to start your projects. Follow the comic strip below!

1

Create Folder

📁 Project 1

Go to your computer's desktop, right-click, and create a new folder named Project 1.

2

Open Workspace

Launch your VS Code software, then:

New Text File

New File...

Open Folder...

Click Open Folder, select your desktop folder "Project 1", and click "Open".
✨ The "Project 1" file is now opened in VS Code!

3

Talk to AI

Ask Google Gemini or Claude:

"Write me the full code so I can directly copy and paste it into VS Code. Create a presentation webpage titled 'Introduction to MJM Nursery' (an oil palm nursery located in Miri, Sarawak). Use a clean, light color theme and include a functional 'Like' button so visitors can like the page."

💡 Tip: You may copy the text above and paste it directly into your Google Gemini or Claude chatbox to try out now together!

4

AI Replies

The AI will generate your full webpage:

<!DOCTYPE html>
<html>
  <head>
    <title>MJM Nursery</title>
    <style>
      body { background: #f4f4f4; }
    </style>
  </head>
  <body>
    <h1>MJM Nursery Intro</h1>
</html>

5

Copy the Code

The AI has generated the code. Now, get ready to copy it.

If you are using Google Gemini:
Look for the copy button at the top right of the dark code block and click it.

📋 Copy Code

If you are using Claude Code:
1. Click the AI's reply (the attached HTML file in the chat).
2. The right side will have a preview column, find the </> button and click it.
3. Click the copy button.

6

Create File & Paste

Go back to VS Code to create your file:

EXPLORER

▼ PROJECT 1

📄+ 📁 ↻

⚠️ Note: File names are case-sensitive! Always use the exact file name the AI suggests (e.g. index.html).

Now let's create a new file, name it "index.html" (if your AI didn't reply to you with a file name), then open it and hit Paste (Ctrl+V / Cmd+V) to drop your code in!

💾 Don't forget to Save!
Press Command + S (Mac) or Ctrl + S (Windows).

7

See It Live!

The Final Steps:

1. Go back to your computer desktop.
2. Open your Project 1 folder.
3. Double-click the index.html file.
4. Your webpage will now open in your web browser!

🎉 Congratulations, your webpage now exists!

➔

file:///Users/Desktop/Project_1/index.html

Introduction to MJM Nursery

Welcome to our premier oil palm nursery located in Miri, Sarawak.

8

Important Notes

📌 Keep in mind for your next vibes:

1. It's Local Only (For Now)

Right now, your website lives only on your personal computer. Nobody else on the internet can see it yet! In our next class, we will learn how to publish your code to the web so you can share a live link with anyone.

2. Naming Matters!

Code relies heavily on exact file names. Always ask your AI what to name your folders and files, and make sure you spell them exactly as suggested (like index.html).

3. Not Satisfied? Tell the AI!

Just reply to the AI with your changes! (e.g., "1. Change title color to dark green. 2. Add a lighting animation behind the title.") It will generate fresh, updated code instantly.

4. Always Ask for "Full Code"

Always tell the AI to give you the FULL CODE. That way, you simply delete your old code in VS Code and paste the new version entirely — no guesswork or stitching pieces together.

5. Browser Still Showing Old Code?

Updated your code but the browser looks the same? Check these two things:

💾 Did you save? Press Cmd + S (Mac) or Ctrl + S (Windows) in VS Code first.

🔄 Still old? Do a Hard Refresh — Cmd + Shift + R (Mac) or Ctrl + Shift + R (Windows) — to force the browser to load your newest code.

🎉 YOU DID IT! 🎉

Congratulations! You are officially using AI to code!

You now understand how to collaborate with the AI brain and use your coding software workspace. You've officially completed the starter kit!

🚀 Coming up in the next class:

1. Add Functions to the Webpage:
Learn how to instruct AI to add brand-new features on top of your existing webpage.
2. Linking Multiple Pages:
How to code more than one HTML file and link them together to create logic and flow between pages.
3. Going Live:
How to publish your code onto the live web so anyone with a link can visit your webpage!

Supercharge Your Webpage with New Features!

Time to level up. In this lesson, you'll learn how to instruct AI to add brand-new functions on top of the webpage you already built — without touching a single line of your existing code.

🎯 What we are building today:

1

📸

Drag & Drop

A zone to drag and drop photo files, display the uploaded photo, and write a rating comment.

2

📊

Dashboard Counter

A live dashboard section that automatically counts how many files have been attached.

3

🖨️

Print Button

A functional button that allows users to directly print the dashboard view.

✨ Now let's do it step by step~

1

Step

📎 Attach your project file to the AI

Drag and drop your index.html file from Class 1 directly into the AI chat. This lets the AI read your existing code so it knows exactly what to build on top of.

Claude AI — Chat

📄

index.html

Your Class 1 project

✓ Attached

⬆️ Drag & drop your index.html here, or click to browse

💡 Where is my file? Go to your Project 1 folder on your Desktop — your index.html is inside there!

2

Step

💬 Send the add-on prompt

Tell the AI to add on to your existing file — not replace it! Here is what the message looks like:

Claude AI — Chat

📄 index.html (attached)

The attached file is my current webpage. Do not change any existing code or logic. Only add on the following new feature:

Drag & Drop Function — A drag-and-drop zone where users can upload photo files. Once a photo is dropped, display it on the page alongside a text box for the user to write a rating comment.

Give me the full updated code to copy and paste directly into VS Code.

Send ➤

👆 Click Copy Prompt to copy the text above — then paste it directly into your AI chat and hit Send!

⚠️ Two key phrases to always include in your prompt:

1 "Do not change any existing code or logic" — this tells the AI to add on only, keeping everything you already built safe.

2 "Give me the full updated code to copy and paste directly into VS Code" — always ask for the complete file so you can simply delete the old code and paste the new version in one go.

3

Step

🤖 Wait for the AI to finish — then copy the full code

The AI will reply with your updated code. A full, complete code always starts with <!DOCTYPE html> at the very top and ends with </html> at the very bottom. Use these as your checkpoints!

Claude AI — Chat

AI

Claude ✓ Finished

Here is your updated full code with the Drag & Drop feature added:

                                                index.html
                                                📋 Copy code
                                            

                                                1
                                                <!DOCTYPE html>
                                                ✓ Start here
                                            
2<html lang="en">
3  <head>
4    <title>My Project</title>
5    <style> ... </style>
6  </head>
7  <body>

                                                ...
                                                — all your existing code + new drag & drop feature —
                                            
...  </body>

                                                ...
                                                </html>
                                                ✓ End here
                                            

⛔ NOT ready to copy yet

                                            <!DOCTYPE html>

                                            <html>

                                              <body>

                                                ...

                                            AI is still writing...

The code is cut off — </html> is missing at the bottom. The AI hasn't finished yet. Wait!

✅ Ready to copy!

                                            <!DOCTYPE html>

                                            <html>

                                              ...

                                              </body>

                                            </html> ← here!

Both the start and the end are present. The AI has finished. Now copy & paste!

4

Step

💾 Paste into VS Code → Save → Hard Refresh

Now take the full code from the AI and drop it into your project. Three quick actions and your new feature is live!

index.html — VS Code

                                                <!DOCTYPE html>

                                                <html>

                                                  ... full code ...

                                                </html>

① Select All → Delete → Paste

In your VS Code file, press Ctrl+A (Cmd+A on Mac) to select all the existing code. Press Delete or Backspace to clear everything — the file should now be blank. Then press Ctrl+V (Cmd+V on Mac) to paste the new code in.

→

💾

② Save the file

Ctrl + S

Cmd + S on Mac

→

file:///Project_1/index.html

🔄

③ Hard Refresh

Ctrl+Shift+R

Cmd+Shift+R on Mac

🎉

Your new Drag & Drop feature should now appear on your webpage!

If the page still looks the same, double-check that you saved the file first, then try the hard refresh again.

📌 Important Notes

1

Something doesn't work? Don't panic — just tell the AI.
If a feature isn't behaving correctly (e.g. the drag-and-drop zone isn't responding), go back to the AI and describe the problem clearly:
"The drag-and-drop zone is not working. Please fix the logic and give me the full updated code."

2

Browser still showing the old version?
First make sure you saved your file in VS Code (Ctrl+S / Cmd+S). Then do a Hard Refresh (Ctrl+Shift+R / Cmd+Shift+R) to force the browser to load your newest code — not the cached old version.

3

Always paste the full code — not just the new part.
Select all the existing code in VS Code (Ctrl+A / Cmd+A), delete it, then paste the full updated code from the AI. Never try to manually merge or stitch pieces of code together.

📊 Now Let's Do the Dashboard Automatically

A Dashboard can automatically track and record every entry in real time. In this exercise, we will use it to count how many files have been attached through the drag & drop zone.

1

Step

💬 Send the next prompt to the AI

The drag & drop function is done and VS Code is still open — no need to close anything. We continue right in the same AI chat. No need to attach the file again — just paste the prompt below and hit Send.

Your message to Claude AI

You

Do not change any existing code or logic. Only add on the following new feature:

Dashboard Counter — A dashboard section that displays a live counter showing how many photo files have been uploaded through the drag-and-drop zone. The counter should update automatically each time a new file is dropped.

Give me the full updated code to copy and paste directly into VS Code.

Send ➤

👆 Click Copy Prompt — paste it into the AI chat and hit Send!

2

🤖 Wait for AI to finish — then copy the full code

3

💾 In VS Code — Select All → Delete → Paste the new code

4

🌐 Save the file → Hard Refresh the browser → Test it!

🖨️ Now Let's Make It Printable

We'll add a Print Button to the dashboard — so users can download or print the report directly from the page. The AI will also set up proper print margins and layout so everything fits neatly when printed.

1

Step

💬 Send the next prompt to the AI

Still in the same AI chat, no file attachment needed. Paste the prompt below and hit Send.

Your message to Claude AI

You

Do not change any existing code or logic. Only add on the following new feature:

Print Button — A button that allows users to print the current dashboard view. When clicked, trigger the browser's print dialog. Optimise the print layout: set proper margins, hide any buttons or UI elements that should not appear on the printed page, and make sure all content fits neatly on the page.

Give me the full updated code to copy and paste directly into VS Code.

Send ➤

👆 Click Copy Prompt — paste into the AI chat and hit Send!

2

🤖 Wait for AI to finish — then copy the full code

3

💾 In VS Code — Select All → Delete → Paste the new code

4

🌐 Save the file → Hard Refresh the browser → Test the Print button!

🎉

That Was Easy, Wasn't It?

✅ You built 3 real functions — Drag & Drop, Dashboard Counter, and a Print Button.

💡

Think about your real work — scan items, upload documents, log daily entries.
All of that can become a live system you build yourself: a dashboard that tracks everything automatically, and a report you can print anytime.

🚀 Describe what you want → AI builds it → paste it in. That's vibe coding.

🏆 Class 2 Complete!

🚀 Coming up in Class 3:

1

Linking Multiple Pages
Build more than one page and connect them — create a proper flow like a login page, a dashboard page, and a report page.

2

Going Live
Publish your project to the internet — so anyone with your link can open and use it, from any device.

3

Add Claude Code in VS Code
Install the Claude Code extension inside VS Code — chat with AI and edit code in the same window, no more switching between two apps.

🔗 Let's Link a New Page

Right now your project only has one page — index.html. In this topic, we add a second page: a Customer Feedback Form where customers can leave a rating and comment. Then we link the two pages together so users can navigate between them.

1

Step

💬 Attach your file and ask AI to create the feedback page

Open a new AI chat, attach your index.html file, paste the prompt below, and hit Send.

📌 Normally AI will suggest its own file names — but to keep this exercise consistent, we are specifying the name customerfeedback.html ourselves.

Your message to Claude AI

You

The attached file is my current index.html webpage. Do not change anything in it.

Create a new separate HTML file named customerfeedback.html. This page should be a Customer Feedback Form that includes:

— A 5-star rating selector where customers can click to choose their rating
— A text area for customers to write their feedback comment
— A Submit button

Give me the full code for customerfeedback.html ready to copy and paste into VS Code.

Send ➤

👆 Attach index.html first, then copy the prompt and hit Send.

📋 When AI replies — create the new file and paste:

① Copy the customerfeedback.html code from the AI reply

② In VS Code Explorer, click the New File icon → name it customerfeedback.html

③ Open the file → Paste the code in → Save (Ctrl+S / Cmd+S)

2

Step

🔗 Ask AI to add a button on the main page to go to the feedback page

Stay in the same AI chat — no file attachment needed. The AI already knows both files. Paste the prompt below and hit Send.

Your message to Claude AI

You

Do not change any existing code or logic. Only add on the following:

On the index.html page, add a button that when clicked, navigates the user to customerfeedback.html.

Give me the updated full code for both index.html and customerfeedback.html, ready to copy and paste into VS Code.

Send ➤

👆 Copy the prompt, paste it into the AI chat and hit Send.

📋 AI will give you updated code for two files — paste each one separately:

📄 File 1 — index.html

① Copy the index.html code from the AI reply ② Open index.html in VS Code → Select All → Delete → Paste ③ Save (Ctrl+S / Cmd+S)

📄 File 2 — customerfeedback.html

① Copy the customerfeedback.html code from the AI reply ② Open customerfeedback.html in VS Code → Select All → Delete → Paste ③ Save (Ctrl+S / Cmd+S)

3

🌐 Hard Refresh the browser → click the button on your main page → it should open the feedback form!

🌐 Going Live with GitHub

Right now your webpage only lives on your computer. In this lesson, you'll use GitHub — a free platform — to publish your HTML file so anyone in the world can open it with a link!

🐙 What is GitHub?

GitHub is like a Google Drive for code. You upload your HTML file there, and GitHub will give you a free live website link you can share with anyone — no monthly fees, no hosting setup.

📋 Step-by-Step: Publish Your Webpage

1

Register a Free GitHub Account

Go to github.com and click "Sign up".

github.com

Create your account

Enter your email address

Create a password

Continue →

💡 Use your email, pick a username, and verify your account. It's completely free!

2

Create a New Repository

A repository (or "repo") is like a project folder on GitHub. After logging in:

a

Click the ＋ New button (top-right corner, or the green "New" button on the left)

b

Give your repository a name — e.g. my-webpage (no spaces, lowercase)

c

Make sure it is set to Public

d

Click the green "Create repository" button

⚠️ The repository name becomes part of your website URL — keep it simple, lowercase, no spaces.

3

Upload Your HTML Files

After creating the repo, GitHub shows you a "Quick Setup" page. Look for the link that says "uploading an existing file" and click it.

Quick Setup

Get started by creating a new file or uploading an existing file.

…or uploading an existing file 👆 click this

An upload page will open. Drag your files into the box — for this exercise, upload both:

📄 index.html

📄 customerfeedback.html

📂

Drag files here to add them to your repository

✓ index.html

✓ customerfeedback.html

Scroll down and click the green "Commit changes" button to save the files to your repo.

Commit changes

4

Publish with GitHub Pages

⏱️ Wait 1–3 minutes for GitHub to process your files, then follow these steps:

a

Click the "Settings" tab at the top of your repository page

b

In the left sidebar, click "Pages"

c

Under Branch, open the dropdown and choose "main" — next to it should show "/ (root)"

d

Click "Save"

Settings → Pages

Branch

main ▼

/ (root) ▼

Save

Refresh the Settings → Pages page. You'll see a web address appear — click it and your project is now live on the web! 🎉

🌐 Your site is live at https://yourusername.github.io/my-webpage/

🚀

Your webpage is now live on the internet!

Share the link with anyone — they can open it on their phone, laptop, or tablet. No app needed, just a browser link!

🤖 Add Claude Code in VS Code

Tired of copy-pasting code between Claude and VS Code? With the Claude Code extension, the AI lives inside VS Code itself — you chat with it directly and it edits your code for you. No more copy-paste!

😩 Before

Open Claude.ai → type prompt → wait → copy code → switch to VS Code → select all → delete → paste → save → switch back to browser.

😎 After

Type your prompt in VS Code → Claude edits the code directly. Done. Your file is already updated and saved!

📋 How to Set It Up

1

Open Your HTML File in VS Code

First, open VS Code and load your index.html project as usual.

index.html — VS Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    ...your code here...
  </body>
</html>

2

Click the Extensions Icon in the Left Sidebar

On the left side of VS Code, you'll see a column of icons. Look for the Extensions icon — it looks like four squares, with one slightly detached:

🗂

🔍

🔀

▶

🧩 click here

Extensions

🔍 Search Extensions...

INSTALLED

Live Server ✓

3

Search "Claude Code" and Install

In the Extensions search bar, type Claude Code and press Enter. You'll see it appear — click the blue "Install" button.

🔍 Claude Code

🤖

Claude Code

Anthropic • AI coding assistant

Install

4

Open the Claude Code Chat Panel

Once installed, go back to your index.html file. Look at the top-right corner of VS Code — you'll see the Claude Code logo button. Click it!

index.html

                                    <body>

                                     <h1>Hello!</h1>

                                    </body>

🤖

Claude Code

← click here to open

👋 Hi! I'm Claude. What would you like me to help you build?

Type your prompt here...

💡 A chat panel will slide open on the right side of your code. This is your AI assistant — right inside VS Code!

5

Type Your Prompt — Claude Edits Your Code Directly!

Just type what you want in the chatbox and hit Enter. Claude will read your open file and make the changes directly in your code — no copy-paste needed!

Example prompt you can type: "Add a button at the top that says 'Go to Feedback Form' and links to customerfeedback.html"

✅ Claude will find the right place in your code, make the edit, and show you a diff (a highlighted before/after) so you can review the change before accepting it.

⚡

No more copy-paste workflow!

With Claude Code inside VS Code, you just describe what you want and the AI does the editing. Your file is always up to date — just save and refresh your browser.

🗄️ What is a Database?

Right now, every time someone refreshes your webpage, all the data disappears. A database is where we permanently store information — like a giant online notebook that remembers everything, even after you close the browser.

💡 Think of it this way

📝 Without a Database

Like writing notes on a whiteboard — once it's wiped, everything is gone.

📚 With a Database

Like writing in a permanent notebook stored online — the data stays forever, safely.

🌍 Accessible Anywhere

Any device, any browser — everyone reads from and writes to the same notebook.

🎯 Real Examples in Your Work

✅ Customer feedback stays saved — you can review it tomorrow, next week, or next year.

✅ Your dashboard counter keeps counting even after you close the page.

✅ Your teammate opens the same page and sees the exact same data you see.

🚀 Sign Up for a Free Database

We'll use Supabase — a free, beginner-friendly database that's perfect for vibe coding.

🟢 Supabase — Free Tier

Your cloud database. No credit card required. Free forever for small projects.

Sign Up for Supabase

📋 Quick Sign Up Steps

1

Click Sign Up for Supabase above → sign up with your email or GitHub.

2

Click New Project → name it anything (e.g. my-vibe-app) → choose a password → pick the nearest region → Create.

3

Wait ~1 minute for your project to spin up — then you're ready for Topic 2. ✨

🔌 Link Your Webpage to the Database

Now we'll hook your webpage up to the Supabase database you just created. Once connected, any customer feedback submitted will be saved permanently — and you can pull it up anytime from any device.

1

Step

🔑 Grab your Project URL + API Keys from Supabase

Think of these as the address + password to your database. Your webpage needs them to talk to it. Open a notes file and paste each value in as you copy it.

📍 Part A — Project URL (from Settings → General)

① Inside your Supabase project, click the Settings icon (⚙️) → General.

② Find Project URL (looks like https://xxxx.supabase.co) → copy it → paste into your notes.

🔐 Part B — API Keys (from Settings → API Keys)

① Go to Settings → API Keys.

② Under Publishable key, copy the value (starts with sb_publishable_…) → paste into your notes.

③ Under Secret keys, click the 👁️ eye icon to reveal → copy the value (starts with sb_secret_…) → paste into your notes.

📝 Your notes file should now have 3 values:

Project URL — https://xxxx.supabase.co
Publishable key — sb_publishable_…
Secret key — sb_secret_…

⚠️ Keep the Secret key private — never share it publicly or post it online. You'll hand all 3 values to the AI in Step 2, and the AI will insert them into your code for you.

2

Step

💬 Attach your files and ask AI to wire up Supabase

Open a new AI chat, attach both index.html and customerfeedback.html, paste the prompt, and hit Send.

📌 Replace YOUR_PROJECT_URL, YOUR_PUBLISHABLE_KEY, and YOUR_SECRET_KEY with the 3 values from your notes.

Your message to Claude AI

You

The attached files are my current webpage. Do not change any existing design or logic. Only add the following:

Connect this project to a Supabase database using the values below — please insert them directly into the code:
— Project URL: YOUR_PROJECT_URL
— Publishable key: YOUR_PUBLISHABLE_KEY
— Secret key: YOUR_SECRET_KEY

Create a table called feedback with columns: id, rating, comment, created_at. Give me the SQL to run inside the Supabase SQL Editor so the table is actually created in the database.

Then update customerfeedback.html so when a customer clicks Submit, the rating and comment are saved into the feedback table.

Give me the full updated code, ready to copy and paste into VS Code.

Send ➤

👆 Attach both HTML files, paste your 3 values into the prompt, then hit Send.

⚠️ IMPORTANT — Why we must ask for the SQL

Updating the HTML code alone does not create any table in the database. The only way a table actually exists in Supabase is by running SQL inside Supabase's SQL Editor. That's why the prompt specifically asks the AI to "give me the SQL to run inside the Supabase SQL Editor" — without that, the webpage will try to save feedback into a table that doesn't exist, and nothing will be stored.

3

Step

🗃️ Create the feedback table in Supabase

AI will give you a block of SQL. Run it once inside Supabase — this is what actually creates the table that stores the data.

① In Supabase, click SQL Editor in the left sidebar → New query.

② Paste the SQL from the AI reply → click Run. You should see "Success".

③ Click Table Editor → confirm you can see the new feedback table.

4

Step

📋 Paste the updated code back into VS Code

AI gave you updated customerfeedback.html (and sometimes index.html). Replace each file in VS Code with the new version.

For each file AI updated:

① Copy the code from the AI reply

② Open the file in VS Code → Select All → Delete → Paste

③ Save (Ctrl+S / Cmd+S)

5

🌐 Hard Refresh your webpage → submit a test feedback → open Supabase Table Editor → you should see the new row! 🎉

🎓

You Did It!

You just built a real, working web app — with a real database.

From zero code to a live project that saves customer feedback. That's vibe coding. 🚀

✅ Class 1 — You learned what vibe coding is and built your very first page.

✅ Class 2 — You built three real features: drag & drop, a dashboard counter, and a print button.

✅ Class 3 — You linked multiple pages, published it live, and brought AI into VS Code.

✅ Class 4 — You connected your app to a real database that saves data forever.

🏆 Vibe Coding Academy — Complete!

🚀 Where to go from here

1

Build something for your real work
A form, a tracker, a dashboard — anything repetitive in your day job can become a web app.

2

Share it with your team
Send them the live link — they can open it on any device, anywhere.

3

Keep iterating
Every new idea is just another prompt away. You've got the skills — now go build. 💪

MJM Vibe Coding Class

Use AI to code

🛠️ Tools for Vibe Coding

1. VS Code

2. AI Assistant

🧠 Things to briefly know before going into the building step

🔤 New Coding Words

1. Prompt

2. HTML files

3. CSS files

4. Javascript

5. Hard refresh

6. Local file

7. UI (User Interface)

⚡ How to Vibe Code

Introduction to MJM Nursery

📌 Keep in mind for your next vibes:

🎉 YOU DID IT! 🎉

🚀 Coming up in the next class:

Supercharge Your Webpage with New Features!

🎯 What we are building today:

Drag & Drop

Dashboard Counter

Print Button

✨ Now let's do it step by step~

📎 Attach your project file to the AI

💬 Send the add-on prompt

🤖 Wait for the AI to finish — then copy the full code

💾 Paste into VS Code → Save → Hard Refresh

📌 Important Notes

📊 Now Let's Do the Dashboard Automatically

💬 Send the next prompt to the AI

🖨️ Now Let's Make It Printable

💬 Send the next prompt to the AI

That Was Easy, Wasn't It?

🚀 Coming up in Class 3:

🔗 Let's Link a New Page

💬 Attach your file and ask AI to create the feedback page

🔗 Ask AI to add a button on the main page to go to the feedback page

🌐 Going Live with GitHub

🐙 What is GitHub?

📋 Step-by-Step: Publish Your Webpage

Your webpage is now live on the internet!

🤖 Add Claude Code in VS Code

📋 How to Set It Up

No more copy-paste workflow!

🗄️ What is a Database?

💡 Think of it this way

📝 Without a Database

📚 With a Database

🌍 Accessible Anywhere

🎯 Real Examples in Your Work

🚀 Sign Up for a Free Database

🟢 Supabase — Free Tier

📋 Quick Sign Up Steps

🔌 Link Your Webpage to the Database

🔑 Grab your Project URL + API Keys from Supabase

💬 Attach your files and ask AI to wire up Supabase

🗃️ Create the feedback table in Supabase

📋 Paste the updated code back into VS Code

You Did It!

🚀 Where to go from here