← Back to guide

Workshop Journey Map

Build a web app by describing it to AI — no coding needed

Hawaii Code AI-Thon · Click any card to jump to that section

This is a visual overview of the workshop. Start the full step-by-step guide →

01 — Orient

Start Here

Build your first web app with AI — no coding experience needed. All you need is a laptop and a personal Google account.

~2 hours total

How It Works

Four steps: Describe what you want → AI generates code → Test it → Ask for changes. Repeat.

4 steps

Choose Your Path

Two ways to use Gemini. Pick one and go — you can always switch later.

~5 min
02 — Choose One Path
You are the project manager. The AI is the developer. Your job: describe, test, direct.

Gemini Canvas

Live preview right in the chat. Easiest starting point — type and see your app instantly.

gemini.google.com Recommended
OR

AI Studio

See the full code, more free usage (~500 req/day). Save as a file and open in your browser.

aistudio.google.com More control
03 — Build & Tweak

The Super Prompt

Copy this starter text and paste it into Gemini before describing your app. It gives the AI instructions so your app works well on the first try.

Copy + paste Key step

Step-by-Step Guide

Follow along for your chosen path — Canvas or AI Studio. Covers setup, first generation, and saving your code.

~20 min

App Ideas

Not sure what to build? Browse categories: Calculate, Track, Organize, Time, Classroom, Fun.

Inspiration Need an idea?

Iteration Tips

One change at a time. Be specific. Paste your full code. Ready-to-use prompt templates inside.

~60 min Most of your time

Understand Your Code

3 prompts: “What did I build?” → “Walk me through” → “Help me fix.”

Optional Curious?
04 — Ship It

Share Your App

Three options: Google Sites (5 min, easiest), GitHub Pages (15 min, robust), or just download the file.

~20 min
Help & Reference

Troubleshooting

8 common issues: blank screen, cut-off code, saving problems, “completely stuck” nuclear option.

Use anytime

AI Workshop Coach

A helper you can set up in Gemini or ChatGPT — like having a patient tutor.

Personal tutor

Glossary

10 real developer terms you’ve already been using: HTML, CSS, JS, deploy, iterate, and more.

10 terms
Content
AI / Tool
Action
Reference
Help