CSS Display

:video_game: Activity: Play CSS Flexbox Ducky!

What you'll learn

• How to use CSS Flexbox properties to control layout
• Master justify-content for horizontal alignment
• Master align-items for vertical alignment
• Understand flex-direction, flex-wrap, and align-content
• Apply flexbox concepts to real-world web layouts

⏱️ Total Time: 30-40 minutes

Activity Instructions

In this activity, you will learn about CSS display properties through an interactive game experience. The CSS Flexbox Ducky game will help you understand how to position and align elements using flexbox properties.

:information_source: Game Link: CSS Flexbox Ducky Tutorial
Make sure you complete ALL challenges!

Steps to Complete Your CSS Display Learning

One. :computer: Access the Flexbox Ducky Game

⏱️ Time: 2 minutes

1. Click the game link above to open CSS Flexbox Ducky
2. Keep the game open in a new tab for easy reference
3. Read the initial instructions on the game page

:bulb: Tip The game works best in Chrome or Firefox browsers. If you experience issues, try refreshing the page.

2. :video_game: Complete All Flexbox Challenges

⏱️ Time: 15-20 minutes

1. Start with Level 1 and work through each challenge sequentially
2. Help the rubber ducky navigate through the pond by applying the correct flexbox properties
3. Focus on understanding these core properties:
   • justify-content - Controls horizontal alignment
   • align-items - Controls vertical alignment
   • flex-direction - Controls the direction of flex items
   • flex-wrap - Controls whether items wrap to new lines
   • align-content - Controls alignment of wrapped lines

:bulb: Tip Take your time! If you get stuck on a level, try different property values until you understand how each one affects the layout.

3. :computer: Practice Key Flexbox Properties

⏱️ Time: 8-10 minutes

As you play through the game, pay special attention to:

1. justify-content values:

   • flex-start - Items align to the start
   • center - Items center horizontally
   • flex-end - Items align to the end
   • space-between - Items spread out with space between
   • space-around - Items have equal space around them

2. align-items values:

   • flex-start - Items align to the top
   • center - Items center vertically
   • flex-end - Items align to the bottom
   • stretch - Items stretch to fill container
   • baseline - Items align to text baseline

3. Direction and wrapping:

   • How flex-direction: column changes the axis
   • How flex-wrap: wrap allows items to wrap

:bulb: Tip Experiment! Try combining different properties to see how they work together. For example, try justify-content: center with align-items: center to perfectly center content.

4. :art: Apply Learning to Real Scenarios

⏱️ Time: 3-5 minutes

Think about how these flexbox properties can be used for:

1. Navigation bars - Use justify-content: space-between for evenly spaced menu items
2. Hero sections - Use centering properties to create eye-catching headers
3. Card layouts - Use flex-wrap for responsive grids
4. Form layouts - Use align-items to align labels and inputs

5. :emoji:️ Reflect on Your Learning

⏱️ Time: 2-3 minutes

After completing all challenges, consider:

1. Which flexbox property was most challenging to understand?
2. How will flexbox improve your future web layouts?
3. What real-world layout would you like to build using flexbox?

Required Elements

:warning: Warning Important: Complete ALL of the following to receive full credit:

1. :white_check_mark: All levels of the CSS Flexbox Ducky game
2. :white_check_mark: Understanding of core flexbox properties:
   • justify-content
   • align-items
   • flex-direction
3. :white_check_mark: Practice with different property value combinations
4. :white_check_mark: Reflection on real-world flexbox applications
5. :white_check_mark: Exit ticket submission to demonstrate your learning

Troubleshooting

Game not loading?

• Try a different browser (Chrome or Firefox recommended)
• Clear your browser cache
• Check your internet connection

Stuck on a level?

• Review the property descriptions at the bottom of the game
• Try each value one by one to see the effect
• Remember that some levels require multiple properties

Properties not working as expected?

• Make sure you're applying properties to the correct element
• Check if you need to combine multiple properties
• Some levels require specific values, not just any valid value

Additional Resources

:bulb: Tip Want to practice more after completing the game? Try these resources:

• Flexbox Froggy - Another fun flexbox game
• CSS Tricks Flexbox Guide - Comprehensive flexbox reference
• Practice flexbox in your own projects!