Improve your understanding of CSS flexbox with an unlimited number of challenges. Play now!

Table of Contents

• What this does?
• Further Improvements
• Credits
• Built with
• Author
• Deployment
• Contributing

What this does?

Users must guide the frogs home to their lilypads using CSS flexbox. This hardcore mode features an unlimited number of challenges incorporating all flexbox properties.

Further Improvements

• The difficulty of the game can be enhanced by adding order or align-self as an option for each individual frog.
• The animation when transitioning to the next challenge can be added to smoothen the gameplay experience. Completed
• Still need to take some cases that the inputs from users are not exactly the same with the solution but generating the same layout into account. Or find a better way to check the answer from users.

Credits

The concept and design for this project are credited to this game (including images of frogs and lily pads).

Built with

• Vite 5 - Build tool
• React 18 - Development environment
• Tailwind CSS - CSS framework
• Zustand - State management

Author

Phot Koseekrainiramon

• LinkedIn
• GitHub

Deployment

This project is deployed to GitHub Pages:

https://photkosee.github.io/flexboxfroggy-hardcore/

Contributing

Pull requests are welcome. Please open an issue first to discuss what you'd like to improve or any bug you'd like to fix.