💻 🌐 ⚡ 🎮 🚀 📱
← Back to Dashboard

🎮 Web Dev Adventure

Overall Progress
45%

💡 Fix the Broken Webpage

Debug and repair the broken code to fix the webpage!

⏱️ 2:00 🎯 Score: 0

🎨 CSS Color Mixer Challenge

Mix the perfect color to match the target!

📚 What You'll Learn

  • RGB Color System: How colors are made from Red, Green, and Blue
  • CSS Color Values: Using rgb() function in CSS
  • Color Theory: Understanding how colors mix together
  • Web Design: How colors affect website appearance

🎯 Learning Objectives

  • Understand the RGB color model (0-255 for each color)
  • Learn to use CSS rgb() function
  • Practice color matching and precision
  • Develop an eye for color accuracy

💡 Pro Tips

  • Start with one color slider and adjust gradually
  • RGB(255, 0, 0) = Pure Red, RGB(0, 255, 0) = Pure Green
  • RGB(0, 0, 255) = Pure Blue, RGB(255, 255, 255) = White
  • RGB(0, 0, 0) = Black, RGB(128, 128, 128) = Gray

Target Color

RGB(255, 100, 50)

Your Color

128
128
128
RGB(128, 128, 128)

🏗️ HTML House Builder

Drag and drop HTML elements to build your house!

📚 What You'll Learn

  • HTML Structure: How web pages are built with HTML elements
  • Semantic HTML: Using meaningful tags like <header>, <main>, <footer>
  • Element Placement: Understanding where different parts belong
  • Web Page Anatomy: Header, navigation, content, and footer sections

🎯 Learning Objectives

  • Learn basic HTML element structure
  • Understand semantic HTML concepts
  • Practice logical content organization
  • Develop spatial reasoning for web layouts

💡 Pro Tips

  • 🏠 Roof = Header (goes at the top)
  • 🧱 Wall = Main content area
  • 🚪 Door = Navigation (how users enter/exit)
  • 🪟 Window = Sidebar (additional content)
  • 🏗️ Chimney = Footer (goes at the bottom)

Available Parts

🏠 Roof
🧱 Wall
🚪 Door
🪟 Window
🏗️ Chimney

Your House

💡 Fix the Broken Webpage

Select the correct code to fix the broken webpage!

📚 What You'll Learn

  • HTML Tags: Correct use of <img>, <div>, <span> elements
  • CSS Properties: color, background-color, display, position
  • Debugging Skills: Finding and fixing common web problems
  • Code Syntax: Proper HTML and CSS formatting

🎯 Learning Objectives

  • Learn to identify broken HTML and CSS code
  • Understand common web development mistakes
  • Practice problem-solving and debugging
  • Develop attention to detail in code

💡 Pro Tips

  • Images: Use <img src="file.jpg" alt="description">
  • Text Color: Use CSS property: color: blue;
  • Layout: Use display: flex; for flexible layouts
  • Always: Check spelling and syntax carefully!

Broken Webpage

Missing Image
Wrong Color Text
Broken Layout

Choose the Fix

🏗️ CSS Layout Builder

Build responsive layouts using CSS Grid and Flexbox!

📚 What You'll Learn

  • CSS Grid: Two-dimensional layout system with rows and columns
  • Flexbox: One-dimensional layout for flexible arrangements
  • Responsive Design: Making layouts work on all screen sizes
  • Modern CSS: Professional web development techniques

🎯 Learning Objectives

  • Master CSS Grid: grid-template-columns, grid-template-rows, gap
  • Learn Flexbox: flex-direction, justify-content, align-items
  • Understand when to use Grid vs Flexbox
  • Create professional website layouts

💡 Pro Tips

  • Grid: Use for complex 2D layouts (like this page!)
  • Flexbox: Use for simple 1D arrangements (buttons, menus)
  • fr units: 1fr 2fr means "1 part and 2 parts"
  • auto: Sizes to content, 1fr takes remaining space

Layout Preview

Header
Sidebar
Main Content
Footer

Layout Options

🌱 Grow the Garden

Click to plant seeds and style them with CSS!

📚 What You'll Learn

  • CSS Animations: Making elements move and change over time
  • CSS Properties: border-radius, box-shadow, background-color
  • Interactive Design: How user actions trigger visual changes
  • Visual Effects: Creating engaging and beautiful websites

🎯 Learning Objectives

  • Learn CSS border-radius for rounded corners
  • Master box-shadow for depth and dimension
  • Understand CSS animations and transitions
  • Create interactive and engaging user experiences

💡 Pro Tips

  • border-radius: 50px = very round, 0px = square corners
  • box-shadow: Creates depth like a shadow behind elements
  • background-color: Changes the color of elements
  • Animations: Make websites feel alive and responsive!

CSS Styling

Style Preview
0px
0px

🎨 CSS Shape Artist

Create amazing shapes using CSS properties!

📚 What You'll Learn

  • CSS Properties: width, height, border-radius, background-color
  • Units: pixels (px) and percentages (%)
  • Shape Creation: Squares, circles, triangles, and complex shapes
  • Visual Design: How CSS creates visual elements

🎯 Learning Objectives

  • Master basic CSS properties for shapes
  • Understand different measurement units
  • Create geometric shapes from scratch
  • Develop spatial reasoning skills

💡 Pro Tips

  • Square: width: 100px; height: 100px;
  • Circle: border-radius: 50%;
  • Triangle: Use borders to create angles
  • Experiment: Try different values to see what happens!

🎯 Current Challenge

Create a Blue Square
Make a square shape that is 100px wide, 100px tall, with no rounded corners, and blue color.
Target Shape
Challenge 1 of 5 ⭐

Your Art Canvas

Shape Properties

100px
100px
0px

✨ CSS Animation Playground

Create fun animations with CSS transforms and transitions!

📚 What You'll Learn

  • Transform: rotate, scale, translate, skew
  • Transition: smooth property changes
  • Animation: keyframes and timing
  • Easing: ease-in, ease-out, linear

🎯 Learning Objectives

  • Master CSS transform properties
  • Understand transition timing
  • Create smooth animations
  • Learn animation best practices

💡 Pro Tips

  • Transform: rotate(45deg), scale(1.5), translateX(50px)
  • Transition: all 0.3s ease-in-out
  • Animation: @keyframes for complex sequences
  • Performance: Use transform and opacity for smooth animations

Animation Demo

🎈

Animation Controls

0deg
1s

🏷️ Tag Matcher

Match HTML opening and closing tags to reveal the hidden picture!

📚 What You'll Learn

  • HTML Tags: <div>, <p>, <h1>, <img>, <span>
  • Opening/Closing Pairs: Every opening tag needs a closing tag
  • Self-closing Tags: <img>, <br>, <hr> don't need closing
  • HTML Structure: Proper nesting and organization

🎯 Learning Objectives

  • Recognize common HTML tags
  • Understand tag pairing rules
  • Learn proper HTML structure
  • Master tag matching skills

💡 Pro Tips

  • Opening: <div> starts a container
  • Closing: </div> ends the container
  • Self-closing: <img src="..." />
  • Nesting: Inner tags close before outer tags
Matches: 0/6 Score: 0 Time: 60s

Opening Tags

Closing Tags

Hidden Picture

🏠
🌳
☀️
🖼️
⭐
🔗

🌐 JavaScript Event Handler

Make your webpage interactive with JavaScript events!

📚 What You'll Learn

  • JavaScript Events: onclick, onmouseover, onmouseout
  • DOM Manipulation: Changing elements with JavaScript
  • Interactive Elements: Making buttons and elements respond to user actions
  • Web Interactivity: How JavaScript makes websites dynamic

🎯 Learning Objectives

  • Understand what JavaScript does for web pages
  • Learn basic event handling (onclick, mouseover)
  • Practice DOM manipulation (changing text, colors, visibility)
  • See how HTML, CSS, and JavaScript work together

💡 Pro Tips

  • onclick: onclick="functionName()" makes buttons clickable
  • getElementById: document.getElementById() finds elements
  • style changes: element.style.color = "red" changes colors
  • JavaScript: Makes websites interactive and responsive!

Interactive Demo

Click Counter: 0
Color Changer
Hover over me!
Text Updater

This text will change when you click the button!

JavaScript Challenges

Challenge 1: Button Counter

Make the button count clicks and display the number

Challenge 2: Hide and Show

Create buttons that hide and show the box below

I can be hidden and shown!

🎯 Final Project Builder

Build your first complete website using everything you've learned!

📚 What You'll Learn

  • Complete Website: HTML structure, CSS styling, JavaScript interactivity
  • Project Planning: Organizing code and planning website layout
  • Real Development: How professional websites are built
  • Portfolio Creation: Building something you can show off!

🎯 Learning Objectives

  • Combine HTML structure, CSS styling, and JavaScript interactivity
  • Understand complete website architecture
  • Practice project planning and organization
  • Create a portfolio-worthy first website

💡 Pro Tips

  • Plan first: HTML structure → CSS styling → JavaScript interactivity
  • Semantic HTML: Use <header>, <nav>, <main>, <footer>
  • CSS Grid: For layout, Flexbox for component alignment
  • JavaScript: Add interactive features like buttons and animations

🏗️ Project Planning

🏠 Your Website Preview

🧩 Component Builder

Available Components
🏠 Header
🧭 Navigation
🌟 Hero Section
📄 Content Area
📋 Sidebar
︻ Footer
Website Builder

💻 Generated Code

/* Your CSS will be generated here */
// Your JavaScript will be generated here