🚀 Quick Start
Tech Explorers is a 2-hour interactive coding session for students ages 6-14. No logins required! Students work entirely in their browsers.
✅ What Works
- Works on any Chromebook
- No installations needed
- Self-guided lessons
- Built-in hints & help
📱 Requirements
- Internet connection
- Modern web browser (Chrome recommended)
- That's it!
📋 Before Class Checklist
- Test the website on a student Chromebook to ensure it loads properly
- Bookmark the URL on all student devices (saves time at start)
- Review Adventure 1 & 2 yourself to anticipate questions
- Print this troubleshooting guide (optional but helpful)
- Prepare a whiteboard/projector to demonstrate if needed
- Have extra scratch paper for students who want to sketch ideas
⏰ 2-Hour Session Timeline
🎉 Welcome & Setup
Help students find the website, get settled. Do a quick show of hands: "Who has done coding before?"
Tip: Tell students they'll be building their OWN webpage today!
🖥️ Adventure 1: Meet the Computer
Students learn what computers are and how we communicate with them.
Your role: Circulate, help with the matching game, answer questions.
🏗️ Adventure 2: HTML Hero
The main event! Students build their first webpage with real HTML.
Your role: Help with typing, check for typos, encourage personalization.
☕ Break Time!
Students stretch, use bathroom. Good time to help strugglers catch up.
🎨 Adventure 3: CSS Artist
Students add colors and styles to their webpages.
Your role: Encourage creativity! There's no wrong way to style.
⚡ Adventure 4: JavaScript Wizard
Students add interactivity with buttons and games.
Your role: This is FUN! Let them experiment with the click counter and quiz.
🎓 Celebration & Wrap-up
Celebrate achievements! Share the URL so they can continue at home.
Tip: Ask "What was your favorite thing you built today?"
🏃 Managing Different Learning Paces
🐢 Slower Students
- Point them to the built-in HINT buttons
- Sit with them briefly to get unstuck
- It's OK if they don't finish everything
- Adventures 1-2 are the core learning
🐇 Fast Finishers
- Direct to "Bonus Challenges" in each adventure
- Send them to the Playgrounds section
- Adventure 5 (AI Explorer) is a bonus!
- Ask them to help classmates ("peer tutoring")
🔧 Troubleshooting Common Issues
| Problem | Solution | Prevention |
|---|---|---|
| "My code doesn't work!" | Check for typos. Look for missing < or > brackets. Use the RESET button to start fresh. | Encourage careful typing. Show them how brackets work. |
| "The preview is blank!" | Make sure they clicked "Run Code". Check that code has <body> tags. | Remind students to click Run after changes. |
| "I broke it!" | Don't worry! The RESET button restores the original code. Nothing is permanently broken. | Normalize mistakes as part of learning! |
| "Page won't load" | Check internet connection. Try refreshing. Use a different browser if needed. | Test the site before class starts. |
| "I'm confused" | Have them use the HINT button first. If stuck, explain the step verbally while pointing at the screen. | Instructions are numbered - point to which step they're on. |
| "I finished early!" | Bonus challenges, playgrounds, or help classmates. | Mention extension activities at the start. |
👶 Age-Specific Tips
Ages 6-8 (Younger)
- Focus on Adventures 1-2 primarily
- Help with typing - keyboards are challenging
- Celebrate SMALL wins enthusiastically
- Use more visual explanations
- Pair with older buddy if possible
Ages 9-11 (Middle)
- Can work more independently
- Encourage personalization
- Good pace through all adventures
- May enjoy helping younger students
Ages 12-14 (Older)
- Can move quickly through basics
- Challenge them with bonus content
- Encourage creative experimentation
- Great peer tutors for younger kids
- Point them to real-world resources
📖 Key Vocabulary
Simple definitions you can use if students ask:
| Term | Kid-Friendly Definition |
|---|---|
| HTML | The building blocks that make up a webpage. Like LEGO for websites! |
| CSS | The colors, fonts, and styles that make websites look pretty. Like clothes for your HTML! |
| JavaScript | The magic that makes things move, click, and change. Like electricity in a house! |
| Browser | The program you use to look at websites (like Chrome, Safari, or Firefox). |
| Tag | Special code words inside < > brackets that tell the browser what to show. |
| Code/Coding | Instructions we write to tell computers what to do. Computers only understand certain languages! |
| AI | Artificial Intelligence - when computers learn to do smart things by looking at lots of examples. |
📤 After Class
🏠 For Students to Continue at Home
Share the website URL! Students can revisit any adventure and use the playgrounds to keep practicing.
URL to share: [Your Tech Explorers URL]
📊 Collect Feedback
- What worked well?
- What was confusing?
- Which adventure was most popular?
- Note for next time!
🔗 Additional Resources
For students who want to keep learning after class:
📚 Comprehensive Resource Guide
We've compiled 30+ free coding resources for kids - websites, games, courses, and more!
View All Resources →Quick links to the most popular resources:
- Scratch - Block-based coding, great for younger kids (ages 8-16)
- Code.org - Free coding courses for all ages with Hour of Code activities
- Khan Academy - HTML/CSS/JS tutorials with interactive exercises
- MakeCode Arcade - Create retro video games with blocks or JavaScript
- CodeCombat - Learn Python/JavaScript through an adventure game