<?xml version="1.0" encoding="UTF-8"?>
<game>
  <title>Flexbox Frog</title>
  <slug>flexbox-frog</slug>
  <short-desc>Help a frog hop to its lily pad by writing CSS code! A fun, interactive puzzle game for learning the basics of CSS Flexbox.</short-desc>
  <categories>
    <category>Educational Games</category>
    <category>Puzzle Games</category>
    <category>Coding Games</category>
  </categories>
  <keywords>flexbox game, css game, learn css, coding game, web development, educational, html5 game, flexbox frog, css puzzle</keywords>
  <content>
# About Flexbox Frog

Flexbox Frog is a charming and simple educational game designed to teach the fundamentals of CSS Flexbox in a fun, interactive way. The game presents a single-level challenge where your objective is to help a frog reach its lily pad. You don't control the frog directly; instead, you write a single line of CSS code to move it.

The game is set in a peaceful pond environment, split between a visual area and a code editor. By manipulating the `justify-content` property, you can see the immediate visual result of your code as the frog hops to a new position. It's a perfect sandbox for beginners to experiment with and understand a core concept of modern web layout without any pressure.

## How to Play

The goal is to write a CSS value that moves the frog from its starting position on the left to the lily pad on the right.

1.  **Observe the Setup:** In the top "View Area," you'll see a frog in a pond and a lily pad on the opposite side.
2.  **Read the Instructions:** The "Code Area" below provides instructions, telling you which CSS property to use.
3.  **Write Your Code:** In the text input field, type a value for the `justify-content` property. For example, you could try `center` or `flex-end`.
4.  **Submit Your Answer:** Click the "Hop!" button or press the Enter key. The frog will move based on the CSS you wrote.
5.  **Win:** If the frog lands on the lily pad, you've solved the puzzle! You can then restart to try again or experiment with different values.

## Features

- **Interactive Learning:** Learn the CSS `justify-content` property by seeing its direct impact in a visual environment.
- **Instant Feedback:** Your code is applied immediately, providing a clear cause-and-effect learning experience.
- **Simple Interface:** A clean, two-part layout with a visual pond and a code editor makes it easy for anyone to start playing.
- **Responsive Design:** The game is fully playable on desktops, tablets, and mobile devices, so you can learn on the go.

## Controls

- **Keyboard:** Use your keyboard to type the CSS value into the editor's input field.
- **Mouse:** Click the "Hop!" button to apply your code.
- **Enter Key:** Press the Enter key as an alternative to clicking the "Hop!" button.

## Tips & Strategies

- **Beginner's Tip:** The frog starts on the left and needs to get to the right. The `justify-content` property aligns items horizontally. Think about which value would move an item to the very end of its container.
- **Experimentation is Key:** This is a learning game! Try all the different values for `justify-content` like `center`, `space-between`, and `space-around` to see what happens. Understanding why they *don't* work is as important as finding the one that does.
- **The Correct Answer:** The most direct solution to move the frog to the lily pad on the right is to use the value `flex-end`.
  </content>
  <faq>
    <question>How do I save my progress in the game?</question>
    <answer>This is a single-level game challenge that resets after completion. There is no progress to save, allowing you to try again and master the concept easily.</answer>
    
    <question>Can I play this game on mobile devices?</question>
    <answer>Yes, this game is fully compatible with mobile browsers and scales to fit your device's screen.</answer>
    
    <question>Is this game free to play?</question>
    <answer>Yes, the game is completely free to play in your browser.</answer>
  </faq>
  <specifications>
    <multiplayer>false</multiplayer>
  </specifications>
</game>

Loading your game...

Flexbox Frog

Flexbox Frog