Activity 07: CSS Display - Discovery Challenge

🎯 Learning Objectives

• Master CSS display properties (block, inline, inline-block, flex, grid)
• Build responsive navigation menus with Flexbox
• Create card layouts with Flexbox
• Design image galleries with CSS Grid
• Implement complete page layouts using Grid

🚀 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 (65% Complete)

• ✅ Complete HTML structure for all 5 exercises
• ✅ Base styling, colors, and typography applied
• ✅ Exercise One: Display Properties - block, inline, inline-block all working!
• ✅ Exercise 2: Flexbox Navigation - responsive navbar with mobile layout!
• ✅ Hover effects and transitions ready
• ⚠️ TODO: Complete card layout (Exercise 3)
• ⚠️ TODO: Finish Grid image gallery (Exercise 4)
• ⚠️ TODO: Complete page layout (Exercise 5)

📋 Tasks to Complete (3 TODOs)

✅ WORKING EXAMPLE 1: CSS Display Properties

Exercise 1 - Understanding Display Properties

This exercise is already complete - study the working CSS to understand:

• display: block; - Takes full width, stacks vertically (red box)
• display: inline; - Flows with text, ignores width/height (blue spans)
• display: inline-block; - Flows inline but accepts width/height (green boxes)

Look at styles.css lines 90-107 to see how each property works!

✅ WORKING EXAMPLE 2: Flexbox Navigation Menu

Exercise 2 - Building a Navigation Bar

This exercise is already complete - study the working CSS to learn:

• display: flex; - Creates a flex container
• justify-content: space-between; - Spreads items apart
• align-items: center; - Vertically centers items
• gap: 10px; - Adds spacing between flex items
• flex-direction: column; - Stacks items vertically (for mobile)

Look at styles.css lines 109-160 for the complete Flexbox navigation pattern!

TODO 1: Card Layout (Medium)

Exercise 3 - Product Cards with Flexbox

Finish the card grid layout using Flexbox:

Success Criteria:

• Cards display in rows of 3 on desktop
• Cards wrap to new rows automatically
• Equal spacing between all cards
• Cards are equal height
• Hover effects work (card lifts up)
• Responsive on smaller screens

Hints:

• Find .card-container around line 130
• Use display: flex;, flex-wrap: wrap;, and gap:
• For .card, use the flex shorthand property
• Try flex: 1 1 calc(33.333% - 20px); for 3-column layout

Expected Result: 3 cards per row on desktop, wrapping automatically, with consistent spacing.

TODO 2: Image Gallery (Hard)

Exercise 4 - Responsive Grid Gallery

Complete the CSS Grid layout for the image gallery:

Success Criteria:

• Images display in a grid (3 columns on desktop)
• Grid gaps are consistent between images
• Images fit proportionally without distortion
• Grid is responsive (2 columns on tablet, 1 on mobile)
• Hover effect works (image scales up slightly)

Hints:

• Find .gallery around line 170
• Use display: grid;
• Use grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
• Add gap: for spacing between images
• Check media queries for tablet and mobile

Properties to add:

1. .gallery: display, grid-template-columns, gap
2. Tablet media query: Adjust to 2 columns
3. Mobile media query: Adjust to 1 column

Expected Result: Automatic responsive grid that adjusts column count based on screen width.

TODO 3: Complete Page Layout (Hard)

Exercise 5 - Full Website Layout

Implement a complete page layout using CSS Grid:

Success Criteria:

• Header spans full width at top
• Sidebar on left with fixed width (200px)
• Main content area fills remaining space
• Footer spans full width at bottom
• Layout is responsive (stacks vertically on mobile)
• All grid areas are properly assigned

Hints:

• Find .page-layout around line 210
• Use display: grid;
• Define grid-template-areas with named areas
• Use grid-template-columns: 200px 1fr; for sidebar + main
• Assign grid-area to each child element
• Update grid-template-areas in mobile media query to stack

Structure:

grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";

Properties to add:

1. .page-layout: display, grid-template-areas, grid-template-columns, gap
2. .page-header: grid-area: header;
3. .page-sidebar: grid-area: sidebar;
4. .page-main: grid-area: main;
5. .page-footer: grid-area: footer;
6. Mobile: Update grid-template-areas to stack vertically

Expected Result: Classic website layout with header, sidebar, main content, and footer using CSS Grid.

🚀 Extension Challenges

Beginner:

• Add CSS transitions to navigation hover effects (change transition duration)
• Create a sticky header that stays at top on scroll (use position: sticky;)
• Change the color scheme to your own brand colors

Intermediate:

• Add a hamburger menu for mobile navigation (requires JavaScript)
• Create a "Load More" button for the image gallery
• Add a search bar to the navigation

Advanced:

• Create a responsive pricing table using Flexbox
• Build a dashboard layout with nested CSS Grid
• Implement a masonry-style gallery (variable heights)
• Add dark mode toggle functionality

🐛 Troubleshooting

Display properties not working?

• Problem: Elements don't behave as expected
• Solution: Check that you've typed the property correctly (display: not displays:)
• Tip: Use browser DevTools (F12) to inspect the computed styles

Flexbox items not aligning?

• Problem: Items don't center or space correctly
• Solution: Make sure display: flex; is on the parent container
• Tip: justify-content controls horizontal spacing, align-items controls vertical alignment

CSS Grid not creating columns?

• Problem: Grid items stack vertically instead of creating columns
• Solution: Check grid-template-columns syntax
• Tip: Use browser DevTools Grid inspector to visualize the grid

Responsive layout not working on mobile?

• Problem: Layout doesn't change on smaller screens
• Solution: Check media query syntax and ensure it's at the bottom of the CSS
• Tip: Test responsive design using browser DevTools device toolbar (Ctrl+Shift+M / Cmd+Shift+M)

Cards have different heights?

• Problem: Cards in the same row have unequal heights
• Solution: Flexbox automatically makes flex items equal height in a row
• Tip: Make sure align-items: stretch; is set (it's the default)

📚 Learning Resources

• MDN: CSS Display - https://developer.mozilla.org/en-US/docs/Web/CSS/display
• CSS Tricks: Flexbox Guide - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• CSS Tricks: Grid Guide - https://css-tricks.com/snippets/css/complete-guide-grid/
• Flexbox Froggy - https://flexboxfroggy.com/ (Interactive game to learn Flexbox)
• Grid Garden - https://cssgridgarden.com/ (Interactive game to learn CSS Grid)

🎓 Completion Checklist

Before submitting:

• All 5 exercises completed
• Display properties work correctly in Exercise 1
• Navigation menu is responsive in Exercise 2
• Cards layout properly in Exercise 3
• Image gallery is responsive in Exercise 4
• Page layout works on all screen sizes in Exercise 5
• Code is properly formatted and commented
• Tested on different screen sizes using DevTools

⏱️ Estimated Time

Total: 45-60 minutes

• Exercise One: 5-10 minutes (Easy)
• Exercise 2: 10-15 minutes (Medium)
• Exercise 3: 10-15 minutes (Medium)
• Exercise 4: 10-15 minutes (Hard)
• Exercise 5: 10-15 minutes (Hard)

🚀 Next Steps

After completing this activity:

1. Experiment: Try changing colors, spacing, and layout variations
2. Extend: Add more cards, images, or page sections
3. Learn More: Explore CSS Grid's advanced features like grid-template-areas
4. Challenge: Combine Flexbox and Grid in a single complex layout

Activity 07 - CSS Display Properties W1: Front-end Design & User Experience Telebort Engineering Time: 45-60 minutes