1 / 12

Welcome

Vibe Coding for Educators

Build anything with AI — no coding experience required.

What You'll Learn

In this session, you'll discover how AI coding tools like Google Gemini, Claude Code, and ChatGPT can help you build real, working web tools — just by describing what you want in plain English.

The Big Idea

What is Vibe Coding?

You describe what you want in plain English. AI writes the code. You refine until it's right. The result is a real, working web page.

Describe
Tell the AI what you want in everyday language
Generate
AI writes the code for you instantly
Refine
Adjust and iterate until it's exactly right

Your Options

AI Coding Tools You Can Use Today

Google Gemini

Free for educators with Google Workspace. Uses Canvas mode to generate and preview web apps right in your browser. No setup required.

Best for quick builds

Claude Code

Anthropic's command-line assistant. Works directly in your project files — reads, edits, searches, and runs commands for you.

Best for existing projects

ChatGPT / Codex

OpenAI's coding assistant. Chat-based code generation with Canvas for visual editing. Wide plugin ecosystem and broad model options.

Most widely used

All three can build web pages, quizzes, interactive tools, and more from a plain-English description.

The Momentum

This Is Happening Fast

AI-assisted coding went from experiment to industry standard in under two years.

84%

of developers now use AI coding tools

— 2025 Developer Survey

70%

of new code at Google is AI-assisted

— Google I/O 2025

90%

of code at Anthropic is written by AI

— Dario Amodei

#1

most in-demand skill: AI fluency

— LinkedIn 2025 Report

Under the Hood

How AI Coding Tools See Your Project

Tools like Claude Code don't just generate code in a vacuum — they can read, search, and understand your existing files. Here's what that looks like:

Read

Open any file and understand its contents

Like opening a document in your editor

Read → index.html
Glob

Find files by name or pattern across your project

Like searching your computer for *.docx files

Glob → **/*.html
Grep

Search inside files for specific text or patterns

Like Ctrl+F across your entire project

Grep → "quiz questions"

Under the Hood

How AI Coding Tools Make Changes

Edit

Change specific parts of an existing file precisely

Like smart find-and-replace that understands context

Edit → fix the typo on line 42
Write

Create brand new files from scratch

Like saving a new document to your project

Write → create quiz.html
Bash

Run terminal commands to install packages, start servers, and more

Like typing commands in Terminal or Command Prompt

Bash → npm start

Under the Hood

How AI Coding Tools Learn More

When the AI needs information it doesn't already know, it can search the web and read documentation in real time.

WebSearch

Search the web for current, up-to-date information — frameworks, documentation, best practices.

Like Googling a question mid-project

WebSearch → "accessible color palettes 2026"
WebFetch

Visit a specific URL and read its content — API docs, tutorials, reference pages.

Like visiting a website and reading the page

WebFetch → docs.example.com/api

The Workflow

Plan, Track, Execute

The best AI coding tools don't just dump code — they think through the problem step by step.

Pro Tips

How to Write a Good Prompt

The quality of what AI builds depends entirely on how you describe it. Here are the rules that make the biggest difference:

Be Specific

Don't say "make a quiz." Say "make a 10-question multiple choice quiz on the American Revolution for 8th graders, with instant feedback after each answer."

Vague: "Make me a quiz"
Better: "Make a 10-question quiz on fractions for 6th graders with a score counter"
Name Your Audience

Tell the AI who will use it. "This is for 7th graders" or "this is for parent conferences" completely changes the output — vocabulary, complexity, design.

"Build a typing speed test for middle school students who are beginners"
Describe the Look

Mention colors, layout, and style. "Clean and modern," "dark mode," "use our school colors (blue and gold)" — the AI will follow your lead.

"Make it look clean and modern with a dark background, large buttons, and rounded corners"
Iterate, Don't Restart

Your first result won't be perfect. That's normal. Say "make the font bigger," "add a timer," "change the green to blue." Each small fix gets you closer.

"This is great, but make the buttons bigger and add a reset button at the bottom"

Watch Out

Common Mistakes to Avoid

The Big Picture

Why This Matters

Build Tools Fast

Create quizzes, rubrics, classroom timers, interactive activities, and parent communication tools — without learning to code.

Teach AI Fluency

Students entering the workforce will use tools like these daily. Understanding how to communicate with AI is becoming as essential as typing.

Focus on Ideas

Spend your time on pedagogy, design, and student outcomes — not syntax, debugging, and Stack Overflow.

Your Turn

Getting Started

The best way to learn vibe coding is to try it. Start small, describe clearly, and refine until it vibes. You don't need to know how the code works — you just need to know what you want.

1/12