📚 Complete Syllabus & Class Lessons

Click any class below to preview key concepts, live code experiments, and mission challenges:

1
Class 1: Introduction to Web & HTML5 Magic
⏱️ 60 Mins • Discover how the World Wide Web works, tag structure, and building your first webpage!
▼
Slide 1: What is HTML & The Web?
  • 🌐 HTML (HyperText Markup Language) is the skeleton of every website on the internet.
  • 🧱 Tags like <h1>, <p>, and <button> tell the web browser how to display text, images, and buttons.
  • 🎨 CSS gives the skeleton colorful clothes, and JavaScript brings it to life!
💡 Key Highlight: Every webpage you visit—YouTube, Roblox, Wikipedia—is built with HTML!
Slide 2: Your First HTML Structure
  • Use <h1> to <h6> for big titles and headings.
  • Use <p> for paragraphs and <button> for interactive buttons.
Slide 3: Class 1 Challenge: Personal Profile Page
  • 🎯 Create an index.html file with your name, hobbies, favorite games, and an image tag <img>.
  • ⚡ Bonus: Add an ordered list <ol> of your top 3 favorite coding projects.
🎯 Practice Challenge: Build a 1-page profile showcasing your favorite game and character with images and bullet lists.
2
Class 2: CSS Colors, Gradients & Font Typography
⏱️ 60 Mins • Transform plain text into futuristic neon styles with CSS selectors and Google Fonts.
▼
Slide 1: Introduction to Cascading Style Sheets (CSS)
  • 🎨 CSS selectors target HTML elements: element { property: value; }
  • 🌈 Hex codes (#6C63FF) and RGB let you choose from 16 million colors.
  • ✨ Background gradients add modern depth and visual polish.
💡 Key Highlight: Pro Tip: Dark mode backgrounds with vibrant accent colors make websites look sleek and modern!
Slide 2: Class 2 Challenge: Neon Hero Card
  • 🎯 Style a gamer avatar card with glowing neon borders and rounded corners.
  • ⚡ Add hover transform effects when mouse cursor moves over the card.
🎯 Practice Challenge: Create a 3-color palette CSS stylesheet for your hero card.
3
Class 3: Layouts with Flexbox & Interactive Buttons
⏱️ 60 Mins • Master modern flex containers, responsive column alignment, and hover animations.
▼
Slide 1: Why Flexbox is a Superpower
  • 📐 `display: flex;` aligns items side-by-side automatically.
  • ↔️ `justify-content: space-between;` creates clean gaps between menu items.
  • 📱 Responsive design ensures pages look great on both laptops and phones.
💡 Key Highlight: Modern web developers use Flexbox for navigation bars, product grids, and hero sections!
Slide 2: Class 3 Challenge: Restaurant Menu Gallery
  • 🎯 Build a 3-item food menu with images, prices, and 'Order Now' glowing buttons.
  • ⚡ Animate button scale on hover (`transform: scale(1.05);`).
🎯 Practice Challenge: Build a responsive navigation bar with 4 menu items that flex on mobile.

🛠️ What Young Coders Will Build

🚀
Gamer Bio & Personal Hero Portfolio
Hands-On Portfolio Project
🚀
Interactive Restaurant Menu with Photo Gallery
Hands-On Portfolio Project
🚀
My Favorite Movie Fanpage with CSS Badges
Hands-On Portfolio Project
🚀
Animated Landing Page with Gradient Buttons
Hands-On Portfolio Project