TODAY’S MISSION
Build a complete business website with calculator, game, and leaderboard in 30 minutes using AI!
SETUP (Check off as you complete!)
- Open browser and go to google.com/gemini
- Sign in with Google account
- Create folder called “MyBusiness” on Desktop
- Open Notepad (for saving code)
- Keep this guide open for reference
📁 HOW TO SAVE & RUN HTML FILES
CRITICAL: Saving Your First File (Step 1)
In Notepad, you MUST do this:
- Click File → Save As (not just “Save”)
- Navigate to Desktop → MyBusiness folder
- Type filename: sneaker-business.html
- Change “Save as type” dropdown to All Files (.)
- ⚠️ If you skip this, file saves as .txt and WON’T WORK!
- Click Save
Opening Your Website:
- Go to Desktop → MyBusiness folder
- Double-click sneaker-business.html
- It opens in your browser – no internet needed!
Other ways to open:
- Right-click file → Open with → Choose browser
- Drag file into browser window
Updating Your File (Steps 2, 3, 4):
When you add calculator, game, or leaderboard:
- Gemini gives you COMPLETE new code (all sections + new feature)
- Open your .html file in Notepad
- Select All (Ctrl+A) then Delete
- Paste the new code
- Save (Ctrl+S)
- Go to browser and Refresh (F5) or Ctrl+F5
STEP 1: BUILD THE WEBSITE ⭐
PROMPT TO USE:
Create a single HTML file called "sneaker-business.html" for a sneaker resale business called "Sole Hustle". Include:
1. Hero section with business name, tagline, and button
2. About section explaining the business
3. Featured Drops section with 5 sneakers drawn using CSS/SVG (no image files)
4. How It Works section with 4 steps using emoji
5. Contact form
6. Dark mode toggle button
7. Smooth navigation
Style: Modern gradients, shadows, animations. No external files. Mobile responsive.
What to do:
- Copy the ENTIRE prompt above (select all the text in the box)
- Go to Gemini and paste it, press Enter
- Wait 30-60 seconds for Gemini to generate code
- Copy ALL the code Gemini gives you (scroll down to see all of it!)
- Paste into Notepad
- Save As following the instructions above ☝️
- Find the file and double-click to open in browser
What you should see:
- Sole Hustle business website
- Hero section with business name
- About section, Featured Drops with sneakers
- How It Works, Contact form
- Dark mode toggle button (try it!)
Checklist:
- Website opened in my browser
- I can see all sections (hero, about, products, etc.)
- Dark mode button works
- File is saved as .html (not .txt)
STEP 2: ADD PROFIT CALCULATOR 💰
PROMPT TO USE:
IMPORTANT: Keep ALL existing HTML code from the previous website. Add this new section AFTER the existing sections, before the contact form.
Add a Profit Calculator section with:
- 3 preset buttons at top: "Thrift Find" ($20/$80/$5/8%), "Limited Drop" ($200/$400/$20/10%), "Clearance Flip" ($50/$150/$10/8%)
- Input fields for: buying price, selling price, shipping costs, platform fees (%)
- Calculate and show: total costs, net profit, ROI percentage
- Color-coded results (green for profit, red for loss)
- Rating badges based on ROI (Excellent, Good, Fair, Poor)
- Break-even calculator showing minimum selling price to cover costs
- Time value calculator: input hours spent, show hourly rate (profit/time)
- Use emoji icons and modern styling
What to do:
- Copy the entire prompt above
- In Gemini, type: “Add this to sneaker-business.html”
- Paste the prompt and press Enter
- Wait for Gemini to generate the COMPLETE code (with calculator added)
- Copy ALL the new code
- Open your .html file in Notepad
- Ctrl+A (select all) → Delete → Paste new code → Ctrl+S (save)
- Go to browser → Refresh (F5)
Try the calculator:
- Scroll down on your website to find the calculator
- Click the “🔥 Limited Drop” preset button
- See all the fields auto-fill!
- Scroll down to see results:
- Net Profit
- ROI percentage
- Break-Even Price
- Rating badge
- In “Time Value” section, type 2 in the hours field
- See your hourly rate calculate!
Fill in your results:
- Net Profit: $________
- ROI: ________%
- Break-Even Price: $________
- Hourly Rate (2 hrs): $________/hr
Checklist:
- Calculator appears on website
- Preset buttons work
- All calculations show correct results
- Time value calculator works
STEP 3: ADD THE GAME 🎮
PROMPT TO USE:
IMPORTANT: Keep ALL existing HTML code including the website, calculator, and all previous sections. Add this new game section AFTER the calculator, before the "How It Works" section.
Add an "Order Rush Challenge" game section:
Game mechanics:
- Customer appears asking for a specific sneaker by name
- Show 6 different sneakers (drawn with CSS/SVG) as clickable buttons
- Player clicks the matching sneaker
- 60 second timer counts down
- Track: revenue, orders completed, combo multiplier
Scoring:
- Correct click = earn money × combo multiplier
- Combo increases up to 5x with consecutive correct answers
- Wrong click = reset combo to 1x
- Show animated "+$X" popup for correct clicks
- Show "Wrong!" animation for mistakes
End screen shows: total revenue, orders completed, rating (Trainee/Sales Associate/Senior Associate/Store Manager)
What to do:
- Copy entire prompt above
- Tell Gemini: “Add this to sneaker-business.html”
- Paste prompt, wait for code
- Copy ALL new code → Open file → Ctrl+A → Delete → Paste → Ctrl+S
- Refresh browser (F5)
Play the game:
- Scroll to “Order Rush Challenge” section
- Click “Start Challenge”
- Read what the customer wants (e.g., “I’d like the Fire Red please!”)
- Click the matching sneaker quickly!
- Build your combo multiplier (up to 5x!)
- Try to earn as much revenue as possible in 60 seconds
- See your final score and rating
Game mechanics:
- ✅ Correct click = earn money × your combo
- ✅ Combo increases with each correct answer (max 5x)
- ❌ Wrong click = combo resets to 1x
- ⏱️ 60 seconds to complete as many orders as possible
My game results:
- Final Revenue: $________
- Orders Completed: ________
- Final Rating: ________________
- Highest Combo: x________
Checklist:
- Game appears on website
- I can click “Start Challenge”
- Customer orders appear
- I can click sneakers
- Combo multiplier works
- Timer counts down
- Final score screen shows
STEP 4: ADD LEADERBOARD 🏆
PROMPT TO USE:
IMPORTANT: Keep ALL existing HTML code including the website, calculator, game, and all previous sections. Only ADD the leaderboard functionality to the existing game - do not remove any code.
Add leaderboard features:
- Save top 10 scores to browser localStorage
- Show rank on end screen
- "View Leaderboard" button shows all saved scores
- Display: rank medals (🥇🥈🥉), revenue, orders, rating, date
- "Clear Scores" button to reset
- "Share Your Score" text box for screenshots
What to do:
- Copy entire prompt above
- Tell Gemini: “Add this to sneaker-business.html”
- Paste prompt, get code
- Update file (Ctrl+A → Delete → Paste → Ctrl+S)
- Refresh browser (F5)
- Play the game again! Try to beat your score
Leaderboard features:
- After game ends, see your rank on this device
- Click “View Leaderboard” to see top 10 scores
- Your scores are saved (even if you close browser!)
- See medals: 🥇 🥈 🥉 for top 3
- Try to beat your high score!
Checklist:
- Leaderboard saves my scores
- I can see my rank
- “View Leaderboard” button works
- Scores persist after refresh
BONUS CHALLENGES (If you finish early!)
1. Change Colors:
Prompt: “Change the color scheme to use blue and gold throughout the site”
2. Change Business Type:
Prompt: “Change this from a sneaker business to a [thrift flipping / gaming accessories / tutoring service] business and update all content accordingly”
3. Make Game Harder:
Prompt: “Make the Order Rush Challenge harder with a 45-second timer and 8 sneakers instead of 6”
4. Add Animations:
Prompt: “Make the sneakers in the game bounce and rotate with cooler CSS animations”
5. Your Own Idea:
What feature would you add?
- Write your idea: _________________________________
- Ask Gemini to add it!
ALTERNATIVE BUSINESS IDEAS
Want to create a different type of business? Try these prompts!
Thrift Flipping Business:
Create a modern business website for a teen's thrift flipping business called "Second Chance Style". Include all the same features but themed around finding and reselling vintage clothing and items.
Tutoring Service:
Create a modern business website for a teen's tutoring service called "Study Buddy Academy". Include booking system instead of product showcase.
Digital Art Commissions:
Create a modern business website for a teen's digital art commission business called "Pixel Dreams". Include portfolio gallery using CSS-drawn placeholder art.
Lawn Care Service:
Create a modern business website for a teen's lawn care business called "Green Dream Team". Include service packages and booking form.