Vibe Coding Launchpad

Quick Context

What We're Building

Gemini will generate a single file for you. That file becomes a working webpage you can share on Google Sites.

Live examples—click to try

Plate Tectonics Sim

Drag continents, watch mountains form

Try it

Classroom Dashboard

Timer, noise meter, random picker

Try it

Escape Room Puzzle

Cipher keys, hidden clues, timed challenge

Try it

Biome Simulator

Adjust temperature & rainfall, watch ecosystem change

Try it

Won't work on Sites:

Saving data between visits Student logins Installing software Outside services

Before You Start

One File, No Drama

When Gemini creates a single HTML file, it works everywhere. When it creates something more complex, it won't work on Google Sites.

Works on Google Sites

index.html

<!DOCTYPE html>

<html>

</html>

One file. Everything included.

Won't Work on Sites

App.js

index.js

package.json

import React from 'react';

import './App.css';

function App() {

return <div>...</div>

}

Multiple files. Needs installation.

Watch for these signs you got a complex app:

More than one file tab Mentions "npm install" or "terminal" Code starts with "import React"

If this happens: Just tell Gemini: "Start over and give me everything in a single HTML file."

Important Note

Why Gemini & Google Sites?

We recommend 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.

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. Switch to Thinking for better code.

Click video to expand fullscreen

Open Gemini

Phase 1

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 2

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

Do you have any ideas of what type of app you would make by vibe coding?

Your Idea

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

Phase 2

Everyone's Ideas

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

0 Ideas Submitted

Waiting for submissions...

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.