By the end of today, you will have a real, working app — built by you, powered by AI, and ready to use with your students. Keep this guide open the whole time. Every step is here.
💡
Start Here — Your App Idea
Before you open a single tool, decide what you want to build. Your app should solve a real problem you have in your classroom or school. It doesn't have to be fancy — simple works best for your first one.
My app idea: Write it here _______________________________________________
Who will use it: My students / My teachers / My campus / Just me
Phase 1 — Get Set Up (Before You Write Anything)
1
Create Your Free Claude Account
You need an Anthropic account before you can use Claude Code. It's free to start — no credit card required.
→ claude.ai — Sign up free
Use your school or personal email. Write your email here: _________________________
2
Download Claude Code
Claude Code is a free app that lets you build with AI. Download it at the link below and install it like any other program.
→ claude.ai/download
a
Click Download for your computer (Mac or Windows)
b
Open the downloaded file and follow the install steps
c
Open Claude Code and sign in with the account you just made
3
Create a Folder for Your Project
Claude Code saves your app as files on your computer. Give it a clean home before you start.
a
Go to your Desktop (or Documents)
b
Create a new folder — name it something like
MyApp or
QuizAppc
In Claude Code, click
Open Folder and select the folder you just made
Think of this folder as your app's home. Everything Claude builds will live here.
Phase 2 — Tell Claude What to Build
Your First Prompt — Fill in the Blanks
Build me a simple web app. Here is what it should do:
[Describe your app in 1–2 sentences.]
The user should be able to [describe what they click or do].
Make it easy to use on a phone or computer.
Use a clean, simple design — white background, easy to read.
Save everything in one file called index.html.
Copy this exactly and replace the gold parts with your own words. You don't need to know anything about code — just describe what you want like you'd explain it to a helper.
4
Type Your Prompt and Hit Enter
Paste your prompt into Claude Code's chat box and press Enter. Claude will start writing your app. You'll see code appear — that's normal. You don't need to read it.
Claude usually takes 30–90 seconds. When it stops, your app is ready to preview.
5
Open Your App in a Browser
Find the index.html file Claude created inside your project folder. Double-click it — it opens in Chrome or your default browser. That's your app.
If you don't see an index.html, ask Claude: "Where did you save the file?"
6
Test It and Write Down What You Want to Change
Click through your app like a student would. Write down anything that looks off, is confusing, or that you wish was different.
I want to change: _______________________________________________
I want to add: _______________________________________________
Phase 3 — Make It Yours
7
Ask Claude to Make Changes
Go back to Claude Code and describe what you want changed — in plain English. You can be as specific or as general as you want.
"Make the buttons bigger and change the color to blue."
"Add a title at the top that says [your title]."
"Add 5 more questions about [your topic]."
"Make it show the correct answer after each question."
You can ask Claude to change things as many times as you want. There is no limit.
8
Add Your Content
Replace Claude's placeholder content with your own — your questions, your vocabulary, your standards. Just tell Claude what you want it to say.
"Replace all the questions with these: [paste your questions]"
"Change the subject to [your subject or grade level]."
"Use these vocabulary words: [list them]."
9
Save a Copy You're Happy With
When your app looks the way you want, make a backup copy of your folder so you always have a working version.
a
Right-click your project folder
b
Click Copy → Paste it on your Desktop
c
Rename the copy:
MyApp-Final
✅ Before You Leave — Check These Off
I have a Claude account and can log in
Claude Code is installed on my computer
My app opens in a browser and works
The content in my app is mine (my questions, my words)
I saved a final copy of my project folder
I know how to ask Claude to make changes going forward
Phase 4 — Share It with the World (Free Hosting on Cloudflare)
Right now your app only works on your computer. Cloudflare Pages lets you put it on the internet — free, instant, and no coding required. You'll get a real link like myapp.pages.dev that you can send to anyone.
10
Create a Free Cloudflare Account
Go to Cloudflare and sign up — it's completely free. You don't need a domain or a credit card.
→ dash.cloudflare.com/sign-up
Write your Cloudflare email here: _________________________
11
Go to Cloudflare Pages
Once you're logged in, find the Pages section.
a
In the left sidebar, click
Workers & Pagesb
Click the
Pages tab at the top
c
Click the blue
Create button
d
Choose
Upload assets (not "Connect to Git")
12
Name Your Project and Upload Your File
Give your project a name — this becomes part of your link. Then upload your app file.
a
Type a project name (example:
myquizapp or
mrssmith-vocab — lowercase, no spaces)
b
Drag your
index.html file into the upload box — or click to browse and find it
Your project name becomes your link: yourprojectname.pages.dev
Write your project name here: _________________________
13
Open Your Live Link
Cloudflare will show you a link ending in .pages.dev — click it. Your app is now live on the internet. Anyone with the link can use it.
My live app link: https://_______________________.pages.dev
Share this link with students, parents, or your campus. It works on phones, tablets, and computers — no downloads needed.
14
Updating Your App Later
When you make changes to your app in Claude Code, you can push the update to your live link in seconds.
a
Go back to
dash.cloudflare.com → Pages → your project
b
Click
Create new deploymentc
Upload your updated
index.html file
d
Click
Deploy — your link updates instantly
Your link stays the same every time. Students bookmark it once and always have the latest version.
🚀 You're Live — Check These Off
I have a Cloudflare account
I uploaded my index.html to Cloudflare Pages
My app opens at my .pages.dev link
I tested the link on my phone
I wrote down my live link so I don't lose it
Phase 5 — Protect Your App (Optional but Recommended)
Your app is public by default — anyone with the link can use it. That's fine for most classroom tools, but if you want to limit access to your students only, or sell access to your app, you have options. Just tell Claude what you want and it will add it for you.
A
Access Code (Simple Password Screen)
The easiest option. Claude adds a screen at the start of your app that asks for a code. Only people with the code can get in. You decide what the code is and share it however you want — in a class email, on your board, in Google Classroom.
"Add an access code screen at the beginning of my app. The code is ROOM204. If they type the wrong code, show an error message. If they type the right code, take them into the app."
Best for: classroom tools, campus-only resources, keeping strangers out
B
Unique Codes per Student or Buyer
Give every student or customer their own unique code. Each code only works once or for one person. This is great if you're selling access to your app or want to track who's using it.
"Add an access code system. Generate 30 unique 8-character codes and display them in a list so I can copy them. Each code should only work one time. Show a thank-you screen after a valid code is entered."
Best for: selling your app, distributing to specific students, paid workshops
C
Email-Based Access (Google Form Gate)
Require users to submit their school email before they can enter. You collect the list of who accessed your app and can follow up with them. No coding needed — Claude links a Google Form to your app.
"Add a step before the app starts that asks for the user's name and school email address. After they submit, take them into the app. Show a message that says their access has been recorded."
Best for: tracking student completion, professional development sign-ins, collecting contact info
D
Time-Limited Access
Your app only works between certain dates — perfect for test prep windows, unit reviews, or timed assessments. After the deadline, it shows a "This resource has expired" message.
"Make my app only accessible between June 1 and June 30, 2026. Before or after those dates, show a message that says 'This resource is no longer available.'"
Best for: test prep seasons, time-sensitive content, avoiding students using old material
E
Combine Options
You can stack any of these together. For example: an access code that only works during a certain date range, after the user enters their name. Just tell Claude all of it at once.
"Add an access code screen. The code is STAAR2026. Only allow access between April 1 and May 15, 2026. Also ask for the student's first name before they enter, and display it on the welcome screen."
Best for: professional products, anything you plan to sell or distribute at scale
🔑
Pro Tip — Write Your Access Code Down
Whatever code you choose, save it somewhere you won't lose it. If you forget it, you'll need to ask Claude to change it — which is easy, but avoidable.
My access code: _________________________ Valid from: _____________ to _____________
🔁
If Something Breaks
Just tell Claude: "Something broke. Please fix it." You don't need to know what went wrong — Claude will figure it out.
💬
Talk to Claude Like a Person
No special language needed. "I don't like how this looks — can you make it cleaner?" works perfectly.
♾️
You Own This Forever
Your app lives on your computer. Update it anytime, rebuild it, or start a brand new one. No subscriptions. No limits.