CSS Flex

CSS Tricks: A Guide To Flexbox

This webpage is titled, "A Complete Guide to Flexbox" and is accurate in it's name. The page is laid out as an accordion widget which makes it very easy to navigate. At the very top of the page is a "Table of Contents" for an easy snapshot of the main points, with hyperlinks to those area. Each section is organized just as comprehensively as the whole page, even incorporating an infographic layouts which helps to organize a lot of information in an effective way.

What the Flexbox

This is a video based learning tool developed by Wes Bos, a Full stack developer, speaker, and teacher. He is an independent web developer and also is a co-host of the podcast, "Syntax". On this website, there are 20 free video courses where he teaches Flexbox. His methods, and the tools provided for this course, are easy to understand and explained in a comprehensive manner.

Flexbox Ducky

This website is similar to "Flexbox Froggy" but it features ducks instead of frogs. The object of the game is to place the ducks on top of the appropriate lillypad. To do this, the player must employ their skills in CSS. There are 24 levels to achieve to completion with each level increasing in difficulty.

Summary of the Documentation

Of the three resources, one was primarily reading material with visual graphics to display the information, another is a video tutorial course, and lastly, an interactive game. My personal favorite is the interactive game, however I haven't found many that are as comprehensive and useful as "Flexbox Froggy", that is until now with "Flexbox Ducky". The irony however, is that essentially, they are the same game. I suppose when something isn't broke, there is no sense in fixing it. Games aside, overall, these are all good resources to help solidify the learning of the flexbox property.