Welcome

Vibe Coding Launchpad

Build AI tools without writing code. Just language.

Let's Get Started

First, tell us who you are. This helps us track the amazing things you'll build today.

Your Name *

Email *

Your Role *

School Site *

The Big Idea

What is Vibe Coding?

You describe what you want in plain language. AI writes the code. You refine until it feels right. The result is a real, working web page that runs in any browser—no installation or downloads required.

Describe

Tell AI what you want in plain English

Type your idea...

"Make me a quiz game with 5 questions about fractions"

Generate

AI writes working code instantly

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    function checkAnswer() {
      if (correct) showConfetti()
    }
</html>

Refine

Adjust by conversation until it vibes right

Add confetti!

Done, updating...

"Make the colors more fun and add confetti when they win"

Publish

Share on Google Sites for anyone to use

Published to Google Sites!

"Embed on your Google Site and share the link"

Traditional Coding

Weeks (decades?) to learn

Vibe Coding

Minutes to start

The term "vibe coding" was coined by AI researcher Andrej Karpathy in early 2025. Soon, it will likely just be called programming.

Important Note

Why Gemini & Google Sites?

VVUSD promotes the use of Gemini for vibe coding because of its enterprise-grade data protections for education.

Your Data is Protected

No model training — Your prompts and responses are not used to train AI models
No human review — Chats are not reviewed by humans
FERPA & COPPA compliant — Meets education privacy regulations
Same security as Gmail & Docs — Enterprise-grade protection

Important: You must be logged in with your @valverde.edu account to receive these protections.

Phase 1

If You Can Dream It, You Can Do It. Maybe!

What's something tedious you do over and over? Submit your idea and your facilitator will attempt to build it live.

Your Idea

What's something repetitive that takes too much of your time?

Phase 1

Everyone's Ideas

Here's what everyone submitted. Your facilitator will pick one to build live.

0 Ideas Submitted

Waiting for submissions...

Get Ready

Your Workspace

Canvas

Gemini's creative workspace for writing and coding. You'll see a split screen: your conversation on the left, a live code preview on the right.

Chat

Make me a quiz about fractions

Creating your quiz...

</> Code

▶ Preview

Thinking Mode

Look for the model selector on the right side of the chat, below the send icon—you'll see Fast, Thinking, and Pro. Switch to Thinking for better code.

Fast

Thinking

Pro

Click video to expand fullscreen

Open Gemini

Phase 2

Your First Build: Educational Mini-Game

Let's build something together. You'll create an AI-powered quiz game for your content area. Follow each step and check them off as you go.

Step 1: Start a New Chat

In Gemini, click the Canvas icon from the toolbar on the left side of the chat input. Then, on the right side of the chat below the send icon, switch the model selector from "Fast" to Thinking for better output.

Open Gemini

Watch how
Step 2: Set the Scene

Edit this prompt with your subject and grade, then copy it:
I want to create a fun, interactive quiz game for my students. The subject is [YOUR SUBJECT] and the grade level is [YOUR GRADE]. Create a simple HTML page with: - A welcoming title - One question at a time (5 questions total) - Multiple choice answers (4 options) - Immediate feedback when they click an answer - A fun celebration when they finish - Keep it colorful and engaging Make it work as a standalone HTML file I can open in a browser.
Step 3: Generate & Review

Paste your prompt into Gemini with the Canvas tool selected, then click "Send" and watch it create your game.

Watch how
Step 4: Make It Yours

Ask Gemini to customize your game. Try something like: "Change the background to a gradient purple" or "Make the buttons green." Don't change the font to Comic Sans, please.

Watch: Customize your game

That's vibe coding. You didn't write JavaScript. You didn't learn CSS. You just... described what you wanted and adjusted until it vibed right. Welcome to the future.

Phase 3

Now Build Whatever You Want

Build something that would make your life easier, make you laugh, or make your students curious. Create a game in your favorite art style. The chat window is your oyster.

Need Inspiration?

Here are things other teachers have built in sessions like this:

Parent Email Translator

Paste frustrated draft → get professional version

Random Name Picker

Paste class list → animated wheel picks a student

Vocab Flashcard Maker

Paste word list → interactive study tool

Discussion Starter Bot

Input topic → Socratic questions

🚀

Need Help Starting?

Launchpad App

Get help writing your prompt to create a vibe coded app

Open Gemini Canvas & Start Building

Unstuck Kit

Start with this template:

I want to build a tool that helps me [YOUR PROBLEM].

It should:
- [FEATURE 1]
- [FEATURE 2]

Make it simple and easy to use. Create it as a standalone HTML file.

If it's not working, try saying:

"Make it simpler"
"Start over with a different approach"
"That's not what I meant. I want [clearer description]"
"Add [specific feature]"
"Remove [thing you don't want]"

Still stuck? Raise your hand and ask for help.

Phase 4

Publish & Share

Ready to share your creation with the world? Follow these steps to embed your project on Google Sites.

Step 1: Prepare to Ship Your Product

Click "Preview" in Gemini Canvas. Are you happy with it? You'll probably never feel 100% done—that's just how development works. Ship it!
Step 2: Copy & Embed on Google Sites

1. In Gemini's Canvas, click "Share" then "Copy contents"
2. Open Google Sites, hover over the + icon on the bottom right of Google Sites
3. Click "Full page embed"
4. Name your page, paste your HTML and click "Insert"

Open Google Sites

Watch: Embed on Sites
Step 3: Publish Your Site

Click the "Publish" button in Google Sites to make your creation live. Share the link on the next screen (Phase 5) to add it to our Gallery Walk.

Watch how

Phase 5

Submit Your Creation

Time to show off! Share what you built so everyone can see it in the gallery.

Project Title *

What does it do? *

Google Sites Link

In Google Sites: Click "Publish" → copy the published URL

Screenshot (optional but encouraged!)

Click to upload a screenshot of your creation

PNG, JPG up to 5MB

Phase 6

Gallery Walk

Look at what we built together! Click any card to explore.

0 creations submitted

No submissions yet. Be the first!

Wrap Up

Take a moment to reflect on what you accomplished.

QUICK PULSE CHECK

What surprised you most about this session?

How confident do you feel about using AI tools now?

Should teachers be trained on how to use AI in this way?

LOOKING FORWARD

In the future, could you see yourself developing experiences for students by programming experiences for them?

Would you like more trainings like these?

Rate this session

Anything else you want us to know? (optional)

Thanks for vibe coding with us.

Now go forth and build things that make your life easier. You've got this.