CSS Display - Activities

What you'll learn

In these activities, you will:

• Master CSS display properties (block, inline, inline-block, flex)
• Build strong HTML and CSS foundations
• Create responsive layouts using Flexbox
• Progress from basic styling to complex web layouts
• Apply real-world web design principles

Overview

Welcome to the CSS Display Activities! This comprehensive set of activities will help you master CSS display properties and reinforce fundamental web design concepts. You'll work through 5 hands-on activities that build upon each other, covering everything from basic display properties to advanced Flexbox layouts.

Total estimated time: 2.5-3 hours

Activity One: Understanding CSS Display Properties

💻 Hands-on Coding Activity | Time: 30-35 minutes

Focus: Basic CSS Display Properties

Learning Objectives:

• Understand the difference between block, inline, and inline-block
• Practice changing display properties
• See how display affects layout behavior

Platform: CodePen or StackBlitz

Instructions:

1. Open CodePen or StackBlitz
2. Create a new HTML/CSS project
3. Copy and paste the starter code below
4. Experiment with different display values
5. Observe how each display property changes the layout

Starter Code:

<div class="container">
  <div class="box block">Block Element</div>
  <div class="box inline">Inline Element</div>
  <div class="box inline-block">Inline-Block Element</div>
  <span class="box inline">Inline Span</span>
  <span class="box block">Block Span</span>
</div>

.container {
  border: 2px solid #333;
  padding: 20px;
  margin: 20px;
}

.box {
  background-color: #e74c3c;
  color: white;
  padding: 10px;
  margin: 5px;
  border: 2px solid #c0392b;
}

/* Experiment with these display values */
.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

Tasks:

1. Change the display property of each element and observe the differences
2. Try setting all elements to display: none and see what happens
3. Experiment with display: flex on the container
4. Document your observations in your notes

💡 Tip Use browser DevTools to inspect elements and see their computed display values. Right-click any element and select "Inspect"!

Activity 2: Building a Navigation Menu

🎨 Design & Coding Activity | Time: 35-40 minutes

Focus: Practical Application of Display Properties

Learning Objectives:

• Apply display properties to create a functional navigation menu
• Understand how inline-block works for horizontal layouts
• Practice responsive design principles

Platform: CodePen or StackBlitz

Instructions:

1. Create a new project in your preferred platform
2. Build a responsive navigation menu using display properties
3. Include hover effects and mobile responsiveness

Challenge Code:

<nav class="navbar">
  <div class="nav-brand">My Website</div>
  <ul class="nav-menu">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Your Tasks:

1. Style the navigation to display horizontally using display: inline-block
2. Add hover effects to the menu items
3. Make the navigation responsive (stack vertically on mobile)
4. Use media queries to change display properties for different screen sizes

Bonus Challenge:

• Add a hamburger menu for mobile devices
• Include dropdown submenus
• Add smooth transitions and animations

💡 Tip Use display: none to hide elements and display: block to show them in responsive designs!

Activity 3: Card Layout with Flexbox

💻 Advanced Coding Activity | Time: 40-45 minutes

Focus: CSS Flexbox Layout System

Learning Objectives:

• Master CSS Flexbox properties
• Create responsive card layouts
• Understand flex container and flex item properties

Platform: CodePen or StackBlitz

Instructions:

1. Create a new project
2. Build a responsive card layout using Flexbox
3. Implement different flex properties to achieve various layouts

Starter Code:

<div class="card-container">
  <div class="card">
    <h3>Card 1</h3>
    <p>This is the first card with some content.</p>
    <button>Learn More</button>
  </div>
  <div class="card">
    <h3>Card 2</h3>
    <p>This is the second card with different content.</p>
    <button>Learn More</button>
  </div>
  <div class="card">
    <h3>Card 3</h3>
    <p>This is the third card with more content.</p>
    <button>Learn More</button>
  </div>
</div>

Your Tasks:

1. Set up the card container with display: flex
2. Use justify-content to center the cards horizontally
3. Use align-items to align cards vertically
4. Add flex-wrap to make cards wrap on smaller screens
5. Experiment with flex-direction (row, column, row-reverse)
6. Add responsive breakpoints using media queries

Advanced Challenges:

• Create a masonry layout effect
• Add hover animations to cards
• Implement a grid system using flexbox
• Make cards expand on hover

💡 Tip Start with display: flex on the parent container. Then use justify-content: center; align-items: center; for perfect centering!

Activity 4: Responsive Image Gallery

🎨 Creative Coding Activity | Time: 35-40 minutes

Focus: Advanced Flexbox and Responsive Design

Learning Objectives:

• Create responsive image galleries
• Master flex-grow, flex-shrink, and flex-basis
• Implement responsive breakpoints

Platform: CodePen or StackBlitz

Instructions:

1. Create a responsive image gallery
2. Use Flexbox to create different layout patterns
3. Implement responsive breakpoints for different screen sizes

Challenge: Build an image gallery that:

• Shows 4 images per row on desktop
• Shows 2 images per row on tablet
• Shows 1 image per row on mobile
• Uses placeholder images from Picsum Photos

Sample Structure:

<div class="gallery">
  <div class="gallery-item">
    <img src="https://picsum.photos/300/200?random=1" alt="Gallery Image 1">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/300/200?random=2" alt="Gallery Image 2">
  </div>
  <!-- Add more gallery items -->
</div>

Your Tasks:

1. Set up the gallery container with display: flex and flex-wrap
2. Use flex-basis to control item widths
3. Add responsive breakpoints with media queries
4. Include hover effects and image overlays
5. Add a lightbox effect (bonus)

💡 Tip Use flex: 1 for equal-width items, or flex-basis: 25% for specific widths!

Activity 5: Complete Website Layout

🏗️ Project Activity | Time: 45-50 minutes

Focus: Real-world Application of CSS Display Properties

Learning Objectives:

• Combine all display properties in a complete website
• Create a responsive website layout
• Apply best practices for modern web design

Platform: CodePen, StackBlitz, or your preferred code editor

Instructions:

1. Create a complete website layout using all the concepts learned
2. Include header, navigation, main content, sidebar, and footer
3. Make it fully responsive
4. Use semantic HTML and modern CSS

Website Requirements:

• Header: Fixed navigation with logo and menu
• Main Content: Article layout with proper typography
• Sidebar: Related links and information
• Footer: Contact information and social links
• Responsive: Mobile-first design approach

Sample Structure:

<header class="header">
  <nav class="nav">
    <div class="logo">Your Brand</div>
    <ul class="nav-menu">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main class="main-content">
  <article class="content">
    <h1>Welcome to Our Website</h1>
    <p>This is the main content area...</p>
  </article>
  
  <aside class="sidebar">
    <h3>Related Links</h3>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>
  </aside>
</main>

<footer class="footer">
  <p>&copy; 2024 Your Website. All rights reserved.</p>
</footer>

Your Tasks:

1. Use display: flex for the main layout structure
2. Implement responsive navigation
3. Create a mobile-first design
4. Add proper spacing and typography
5. Include hover effects and transitions
6. Test on different screen sizes

Bonus Features:

• Add a dark mode toggle
• Include smooth scrolling navigation
• Add loading animations
• Implement a search functionality

💡 Tip Use CSS Grid for the main layout and Flexbox for component layouts. This gives you the best of both worlds!

Instructions

Follow these steps to complete the activities successfully:

1. Start with Activity 1 - Work through each activity in sequential order as they build upon previous concepts
2. Use modern platforms - CodePen, StackBlitz, or your preferred code editor
3. Take detailed notes on:
   • Key concepts and definitions
   • Code examples and their effects
   • Common use cases and best practices
4. Practice coding examples by:
   • Typing out the examples (don't copy-paste!)
   • Experimenting with different values
   • Creating your own variations
5. Test your understanding by:
   • Modifying the provided code
   • Adding new features
   • Creating responsive designs
6. Ask questions in class or discussion forums if you need clarification

⚠️ Important Complete all activities before submitting your project. Each activity builds essential skills needed for the final submission.

Project Submission

ℹ️ Ready to submit? When you have completed all CSS Display activities, submit your work using the form below:

Submit Your CSS Display Project

Make sure your submission includes:

• Screenshots or links to all 5 activities
• A brief explanation of what you learned
• Any challenges you encountered and how you solved them
• Your final website layout from Activity 5

Troubleshooting Common Issues

Code Not Working as Expected?

1. Check for typos in your HTML tags and CSS properties
2. Ensure all opening tags have closing tags
3. Verify CSS selectors match your HTML elements
4. Use browser DevTools (F12) to debug
5. Check the browser console for error messages

Flexbox Layout Issues?

• Remember to set display: flex on the parent container
• Check that flex properties are applied to the correct elements
• Use browser DevTools to visualize flex container and items
• Try flex: 1 for equal distribution of space

Responsive Design Problems?

• Start with mobile-first design approach
• Use relative units (%, em, rem) instead of fixed pixels
• Test on different screen sizes using browser DevTools
• Use media queries to adjust layouts for different breakpoints

Platform Issues?

• CodePen: Make sure to save your work frequently
• StackBlitz: Use the preview panel to see live changes
• Local Editor: Use a live server extension for real-time preview

Remember: These activities are designed to reinforce your understanding of CSS display properties and modern web design. Take your time to understand each concept thoroughly before moving forward. Practice makes perfect!

Next Steps: After completing these activities, you'll be ready to tackle more advanced CSS concepts like CSS Grid, animations, and advanced responsive design techniques.