Mastering CSS Flexbox

Mastering CSS, specifically flexboxes, is an essential tool for anyone who would like to pursue a field in frontend / full-stack development, or who would like to pivot fields and create responsive, user-friendly UIs.

Today, I am reviewing Flexbox Froggy, an interactive game I discovered that brings you from beginner to advanced through progressively more challenging games.

In each level of the game, the goal is to move each colored frog to the correctly colored lily pad. This involves building a foundation in essential flexbox properties such as align-items, justify-content, flex-wrap and so on.

Below is an example of a challenge I was given on level 19, and the CSS styles I applied to get all of the frogs onto the correct lilypad.

After having completed all levels of the game, I feel I have a solid grasp of flexbox properties, and am looking forward to applying my skills to future projects.