Activity 05: HTML Division - Discovery Challenge

🎯 Learning Objectives

• Master HTML <div> elements and semantic structure
• Understand ID selectors (#) vs Class selectors (.)
• Apply Flexbox for responsive layouts
• Create circular elements with CSS
• Build structured layouts with nested divs

🚀 Getting Started (See Results in 30 Seconds!)

# Just open index.html in your browser
open index.html
# OR double-click index.html in your file explorer

No installation or setup needed! The template works immediately in any modern web browser.

🎯 What's Already Working

• ✅ Complete HTML structure with semantic divs
• ✅ Title section with gradient background (ID selector demo)
• ✅ Dining table container with Flexbox layout
• ✅ Two working circular plates (Red with Spoon, Yellow with Fork)
• ✅ Hover effects and transitions
• ✅ Responsive design for mobile devices
• ✅ CSS styling with modern properties (gap, transform, box-shadow)
• ⚠️ TODO: Add third plate (Green with Knife)
• ⚠️ TODO: Create second row with 3 more plates
• ⚠️ TODO: Replace emojis with actual images

📋 Tasks to Complete

TODO 1: Add Green Knife Plate (Easy)

Location: index.html - Inside the first dining-table div (around line 42)

Success Criteria:

• Create a div with class="green-plate"
• Add nested content structure matching existing plates
• Include a knife emoji (🔪) and label
• Plate should be circular and green
• Hover effect should lift the plate

Hints:

• Look at the structure of the red-plate and yellow-plate above the TODO comment
• The pattern is: outer plate div -> inner content div -> emoji span + label paragraph
• The CSS for .green-plate is already written for you (check style.css line 92)
• Copy the exact nesting structure but change the class name and content

Expected Result: Three plates side-by-side (Red Spoon, Yellow Fork, Green Knife)

TODO 2: Add Second Dining Table Row (Medium)

Location: index.html - After the first dining-table div AND style.css - TODO 2 section

Success Criteria:

• Create new <div class="dining-table"> container below the first one
• Add 3 plates inside with different colors (blue, purple, orange)
• Each plate should have an emoji and label:
  • Blue plate with 🍽️ (Plate)
  • Purple plate with 🥤 (Glass)
  • Orange plate with 🧂 (Salt)
• Add CSS styling for new plate colors in style.css
• All plates should be circular with hover effects
• Should be responsive on mobile (stacks vertically)

Hints:

• Copy the entire first dining-table div structure as your starting point
• Replace the plate classes (red -> blue, yellow -> purple, green -> orange)
• For CSS, look at how .red-plate, .yellow-plate, .green-plate colors are defined (lines 84-94)
• Use vibrant hex colors (e.g., blue like #3498db, purple like #9b59b6, orange like #e67e22)
• Remember to add the new classes to the common plate selector (lines 64-66) so they inherit the shared styling
• The responsive design is already handled by the .dining-table media query

Expected Result: Two dining table rows, each with 3 colorful circular plates

TODO 3: Replace Emojis with Images (Hard)

Location: index.html - All emoji spans AND style.css - TODO 3 section

Success Criteria:

• Replace all <span class="food-emoji"> with <img> tags
• Images should fit nicely inside circular plates
• Add alt text for accessibility (describe what the image shows)
• Add CSS to style the images (make them circular, fit inside plates)

Hints:

• The <img> tag needs src, alt, and class attributes
• For quick testing, use placeholder images from https://picsum.photos/150/150?random=X (change X for different images)
• Look at how .food-emoji is styled (font-size, display, margin) - your .food-image needs similar treatment
• To make images circular: use border-radius: 50%
• To prevent distortion: use object-fit: cover
• Size the image smaller than the plate (e.g., 120px for a 200px plate)
• For your own images: save them in the project folder and use relative paths like ./spoon.jpg

Image Sources (for reference):

• Placeholder: picsum.photos (free random images)
• Free stock photos: Unsplash, Pexels, Pixabay

Expected Result: Circular plates with actual food photos instead of emojis

🚀 Extension Challenges

Beginner:

• Change the plate sizes (try 250px instead of 200px)
• Add more food items to each plate (multiple emojis)
• Change the dining table background to a wood texture image
• Add a footer with your name and date

Intermediate:

• Create a third row with square plates (remove border-radius)
• Add a sidebar menu showing all available utensils
• Create a "dark mode" version with different colors
• Add CSS animations (spinning plates, bouncing emojis)

Advanced:

• Implement a "drag and drop" feature (requires JavaScript)
• Create a grid layout instead of Flexbox
• Add a "settings panel" to change plate colors dynamically
• Build a complete dinner menu with multiple courses

🐛 Troubleshooting

Plates are not circular?

• Problem: Plates appear as squares
• Solution: Check border-radius: 50%; in CSS (line 69)
• Tip: Make sure width and height are equal (200px x 200px)

Plates are stacking vertically instead of side-by-side?

• Problem: Flexbox not working
• Solution: Check .dining-table has display: flex; (line 49)
• Tip: Use browser DevTools (F12) to inspect the element

ID selector not working (#title)?

• Problem: Background color not showing
• Solution: ID selectors use # not . -> #title { ... }
• Tip: IDs must be unique (only one id="title" per page)

CSS changes not showing?

• Problem: Styles not updating
• Solution: Hard refresh browser (Ctrl+Shift+R / Cmd+Shift+R)
• Tip: Check if <link rel="stylesheet" href="style.css"> is in <head>

Images not loading?

• Problem: Broken image icon showing
• Solution: Check image URL or file path is correct
• Tip: Use absolute URLs (https://...) or relative paths (./image.jpg)

Hover effect not working?

• Problem: Plates don't lift on hover
• Solution: Check :hover pseudo-class syntax (line 77-80)
• Tip: Must have transition property for smooth animation

📚 Learning Resources

• MDN: HTML Div Element - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
• MDN: CSS Selectors - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
• CSS Tricks: Flexbox Guide - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• MDN: Border Radius - https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
• W3Schools: CSS Hover - https://www.w3schools.com/cssref/sel_hover.php

🎓 Key Concepts Explained

ID vs Class Selectors

<!-- ID: Unique, one per page -->
<div id="title">Only one</div>

<!-- Class: Reusable, multiple per page -->
<div class="plate">First plate</div>
<div class="plate">Second plate</div>

/* ID Selector: # symbol */
#title { background-color: aqua; }

/* Class Selector: . symbol */
.plate { border-radius: 50%; }

Flexbox Layout

.dining-table {
  display: flex;              /* Enable Flexbox */
  justify-content: center;    /* Horizontal alignment */
  align-items: center;        /* Vertical alignment */
  gap: 40px;                  /* Space between items */
}

Circular Elements

.plate {
  width: 200px;
  height: 200px;
  border-radius: 50%;         /* Makes it circular */
}

🎯 Completion Checklist

Before submitting:

• Green knife plate added (TODO 1)
• Second dining table row with 3 plates (TODO 2)
• Images replacing emojis (TODO 3)
• All plates are circular and colorful
• Hover effects work on all plates
• Responsive on mobile (test with DevTools)
• Code is properly indented and commented
• CSS file has all necessary styling
• HTML file links to CSS correctly
• Tested in Chrome/Firefox/Safari

⏱️ Estimated Time

Total: 30-40 minutes

• TODO 1 (Easy): 5-10 minutes
• TODO 2 (Medium): 10-15 minutes
• TODO 3 (Hard): 15-20 minutes
• Extension Challenges: 20-30 minutes (optional)

🚀 Next Steps

After completing this activity:

1. Experiment: Try different plate shapes (hexagons, stars)
2. Extend: Add more dining tables with different layouts
3. Learn More: Explore CSS Grid as an alternative to Flexbox
4. Challenge: Create a complete restaurant menu page using divs

Activity 05: HTML Division W1: Front-end Design & User Experience Telebort Engineering Time: 30-40 minutes