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 activities that build upon each other, covering everything from basic web design principles to advanced layout techniques.

Total estimated time: 2.5-3 hours

---

Activity One: Foundation of Web Design

:speech_balloon: Discussion & Learning Activity | Time: 25-30 minutes

Focus: Introduction to Web Design Fundamentals

Learning Objectives:

• Understand the difference between websites and web pages
• Learn about web design principles
• Explore the role of HTML, CSS, and JavaScript

:emoji: Access Activity 1

:bulb: Tip This is a discussion-based activity. Take notes on the key differences between HTML (structure), CSS (style), and JavaScript (behavior).

---

Activity 2: HTML Mastery

:computer: Coding Activity | Time: 30-35 minutes

Focus: HTML Structure and Elements

Learning Objectives:

• Master HTML document structure
• Apply semantic HTML elements
• Understand attributes and their usage

:emoji: Access Activity 2

:bulb: Tip Focus on semantic HTML elements like <header>, <nav>, <main>, <article>, and <footer>. These help with both accessibility and SEO!

---

Activity 3: CSS Selectors Mastery

:computer: Coding Activity | Time: 30-35 minutes

Focus: Advanced CSS Selectors

Learning Objectives:

• Master element, class, and ID selectors
• Apply advanced selector combinations
• Understand selector specificity

:emoji: Access Activity 3

:bulb: Tip Remember the specificity order: ID selectors (100 points) > Class selectors (10 points) > Element selectors (1 point). When in doubt, use classes for styling!

---

Activity 4: Box Model & Layout

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

Focus: CSS Box Model and Layout Concepts

Learning Objectives:

• Understand margin, padding, and border properties
• Apply the CSS box model effectively
• Use HTML divisions for layout structure

:emoji: Access Activity 4

:bulb: Tip Use the browser's DevTools to visualize the box model! Right-click any element and select "Inspect" to see margins (orange), borders (yellow), and padding (green).

---

Activity 5: Flexbox Mastery

:computer: Advanced Coding Activity | Time: 40-45 minutes

Focus: CSS Flexbox Layout System

Learning Objectives:

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

:emoji: Access Activity 5

:bulb: Tip Start with display: flex on the parent container. Then use justify-content for horizontal alignment and align-items for vertical alignment. The most common pattern is justify-content: center; align-items: center; for perfect centering!

---

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. Complete all exercises in each presentation before moving to the next activity
3. Take detailed notes on:
   • Key concepts and definitions
   • Code examples
   • Common use cases
4. Practice coding examples by:
   • Opening your code editor
   • Typing out the examples (don't copy-paste!)
   • Experimenting with different values
5. Test your understanding by creating variations of the examples
6. Ask questions in class or discussion forums if you need clarification

:warning: Warning Important: Complete all activities before submitting your project. Each activity builds essential skills needed for the final submission.

Project Submission

:information_source: Ready to submit? When you have completed your "Introduction to Web Design" setup and created your Glitch profile, submit it using the form below:

Submit your Glitch Profile

Make sure your profile includes:

• A completed profile page
• At least one sample project
• Proper HTML structure and CSS styling

Troubleshooting Common Issues

Activity Links Not Working?

• Make sure you're logged into your Google account
• Try opening the link in an incognito/private window
• Contact your instructor if access issues persist

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

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

---

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