Flexbox Froggy is a website that teaches CSS Flexbox through gameplay across 24 levels. The task is to move the frogs to their corresponding lilypads using CSS properties. As levels progress, the tasks get more challenging, from using one property per level to combining up to four in the last level. Users can choose between different difficulty settings. It broadly appeals to two types of users: Beginners learning CSS and experienced users looking to practice or explore. This design critique focusses on the beginner user group and uses the Beginner difficulty setting.
What works well
Feedback
When the user enters the CSS code, the frogs move accordingly, whether the code is right or wrong. There is continuous and instant feedback. The user can immediately see what happened and evaluate whether it was successful based on the frogs’ placement, bridging the Gulf of Evaluation.
Signifiers
The frogs and lilypads act as good signifiers. The user can understand the aim of the game by seeing the board before even reading the instructions.
What could be improved
Improve signifiers for property values
In every level, the interface suggests which properties can be used to solve it. Selecting a property opens a popup which explains its function and the values it accepts. However, the popup looks like a description, so it is not obvious that the values are selectable buttons and that choosing one will show its behaviour. The interaction is less discoverable. The button design may have been a deliberate choice to keep the visual language consistent with actual CSS syntax.
Provide feedforward: Additionally, the user also has to select each value individually to see its effect. Allowing them to preview a value’s behaviour on hover before selecting it would help them test before committing.
Provide guidance to rectify errors (H9)
When the user enters an incorrect code, there is instant feedback because the frogs are not on their lilypads; the “Next” CTA button also remains disabled. However, there is no guidance on which property needs to be fixed. An exclamation mark beside the incorrect property’s line would indicate what needs correction; the user can then experiment with different values to resolve the error.
Add logical constraints
The interface allows users to skip through levels. As the levels progress, the tasks get more complex. Later levels reintroduce previously learned properties, hence the game has been structured to complete level by level progressively. A logical constraint could be set to restrict the user from advancing ahead until the current level is completed.
Provide onboarding instructions (H10)
The interface opens directly into the game with a short introduction. Although the task is clear, it does not explain the concepts of CSS or Flexbox. The sequel to Flexbox Froggy, Grid Garden, provides an introductory screen with learning objectives and a video. The design rationale for skipping it for Flexbox Froggy may be that Flexbox is a relatively straightforward concept to learn through gameplay. However, an onboarding screen would help users have a clearer conceptual model before they begin.
Conclusion
Flexbox Froggy is an interactive way to learn CSS Flexbox. The playful interface makes learning interactive by letting users immediately see the feedback from the code they enter. I personally like the different difficulty settings that adapt the experience according to the level of CSS familiarity. I also found the colourblind mode to be a useful accessibility feature.
Users often have to rely on trial and error to test different property values when they do not remember how a value behaves, which reduces feedforward. However, since the feedback is instant, this experimentation adds to the learning experience.
As Norman notes, discoverability and understanding are integral to good design. With improvements like clear signifiers and error guidance, the website can better support beginners.