Play The Flex Box Adventure

submited by

Style Pass

2021-06-18 19:30:08

Coding Fantasy is a new platform for learning CSS, HTML and JavaScript by playing coding games. It already offers a free fun educational game for learning how to use the CSS Flex Box mode and here we look at what it entails.

Coding Fantasy's creator Nick Bull has provided a well thought out gamified approach for learning about web development. The first game, Flex Box Adventure, uses three simple sprites - the Knight, Mage and Rogue- who must defeat the evil forces. Defeating them means placing your heroes at the same position as the evil ones by using flexbox's instructions like flex-direction,justify-content and align-items.

There are 24 levels in total, in increasing difficulty. At each level you learn a new CSS command and at subsequent levels you revisit the same command, but examine it in more depth. For example, on the very first level you get to know justify-content which defines how the browser distributes space between and around items horizontally (also called main-axis).

To solve Level 1 requires issuing justify-content:center. Level 2 builds on this and is again about justify-content, but now with the option flex-end.And so on until you reach level 6 where you get to know a new instruction, that of align-items which defines how the browser distributes space between and around items vertically.