Flexbox Froggy Activity

What you'll learn

In this activity, you'll master CSS Flexbox by helping frogs reach their lily pads! You'll learn how to:

• Use justify-content to align items horizontally
• Apply align-items to position items vertically
• Change layout direction with flex-direction
• Control item wrapping with flex-wrap

Objective

To apply concepts of CSS Flexbox through an interactive activity.

Activity: Flexbox Froggy :video_game:

Description

In this activity, you will learn and practice CSS Flexbox by playing Flexbox Froggy, a fun game where you guide a frog to its lilypad using CSS code.

⏱️ Estimated time: 30-45 minutes

---

Before You Start

Check that you have:

• A computer or tablet with internet access
• A web browser (Chrome, Firefox, Safari, or Edge)
• Completed the CSS Flexbox lesson
• Your notes from the lesson ready for reference

---

Instructions

One. Access the Game (⏱️ 2 minutes)

1. Open your web browser
2. Navigate to the Flexbox Froggy game: Flexbox Froggy Activity
3. Wait for the game to load - you should see a pond with frogs and lily pads

2. Play the Game (⏱️ 20-30 minutes)

1. Start with Level 1 - read the instructions on the right side
2. Type your CSS code in the code editor
3. Press Enter or click "Next" to see if your code works
4. Complete at least Level 18 of the game
5. Pay close attention to these CSS properties as you progress:
   • justify-content
   • align-items
   • flex-direction
   • flex-wrap

tip Getting Stuck? If you're stuck on a level:

• Re-read the level instructions carefully
• Try different values for the properties
• Review the properties list below for hints
• Remember that some levels combine multiple properties!

3. Understand the Concepts (⏱️ 5 minutes)

1. Observe how each property works - watch how the frogs move
2. Notice the relationship between main axis and cross axis
3. Try to predict what will happen before pressing Enter
4. Make connections to real website layouts you've seen

4. Screenshot Your Progress (⏱️ 3 minutes)

1. When you complete Level 18, take a screenshot
2. Include the level number and your code in the screenshot
3. Save the screenshot with a clear filename like "FlexboxFroggy_Level18_YourName.png"

:information_source: Info Submission Required You'll need to submit your Level 18 screenshot as proof of completion. Make sure your screenshot clearly shows:

• The level number (18)
• Your CSS code
• The successful completion message

---

Key Flexbox Properties You'll Learn

Justify-Content

Controls alignment along the main axis (horizontal by default):

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

Align-Items

Controls alignment along the cross axis (vertical by default):

• flex-start - Items align to the start
• flex-end - Items align to the end
• center - Items align to the center
• stretch - Items stretch to fill container
• baseline - Items align to their baseline

Flex-Direction

Controls the direction of the main axis:

• row - Horizontal direction (default)
• row-reverse - Horizontal, reversed
• column - Vertical direction
• column-reverse - Vertical, reversed

Flex-Wrap

Controls whether items wrap to new lines:

• nowrap - Items stay on one line (default)
• wrap - Items wrap to new lines
• wrap-reverse - Items wrap in reverse order

---

Tips for Success :bulb:

1. Read the instructions carefully for each level
2. Experiment with different property values to see their effects
3. Take your time to understand each concept before moving on
4. Don't rush - focus on learning rather than just completing levels
5. Pay attention to how the frog moves with each CSS property
6. Review previous levels if you need to remember specific properties
7. Take notes on properties that you find particularly useful

tip Pro Tips

• If a level seems impossible, you might need to combine multiple properties
• The order of your CSS declarations doesn't matter
• Some levels have multiple correct solutions
• Use the hint button if you're really stuck!

---

Expected Outcomes

After completing Level 18, you should be comfortable with:

• :white_check_mark: Basic flexbox container properties
• :white_check_mark: Aligning items in both horizontal and vertical directions
• :white_check_mark: Changing flex direction for different layouts
• :white_check_mark: Understanding the relationship between main and cross axes
• :white_check_mark: Applying flexbox to solve real-world layout problems

---

Troubleshooting Common Issues :wrench:

Game Won't Load?

• Check your internet connection
• Try refreshing the page (F5 or Ctrl+R)
• Try a different web browser
• Clear your browser cache

Code Not Working?

• Make sure you're typing in the correct CSS syntax
• Check for typos in property names
• Ensure you're using the right property values
• Remember to press Enter after typing your code

Level Too Difficult?

• Review the property definitions above
• Try combining properties you've learned
• Think about which axis you need to affect
• Don't forget about flex-wrap for multi-line layouts

---

Why This Matters

Note: This activity is designed to provide hands-on experience with CSS Flexbox. The concepts learned here are fundamental for modern web layout design and will be essential for creating responsive, flexible web layouts in your future projects.

Flexbox is one of the most important CSS layout tools used by professional web developers, and mastering it will significantly improve your ability to create sophisticated web designs.

:warning: Remember Complete at least up to Level 18 and take a screenshot for submission!

:emoji: Ready to guide the frog home? Click the link above and start your Flexbox Froggy adventure!