The Fish Tank

The Process

Fuzzle is a rather simple project to cover, since it's essentially just a puzzle for toddlers translated into a coding program. The hard part, more than either the coding or the actual puzzle, was remembering which piece went where in the actual code.

The Fish Alignment Process

The first thing I did, as depicted above, is to port all the pieces over into a Google Slides and decipher the fake piece, then align the rest correctly. It took a little while, not helped by an early misconception, but I got it in the end.

However I was forced to use flex items for the assigment, which I "cleverly" solved by deliberately ordering the images wrong inside the code and then reordering them correctly with the flex commands. Below is a table for the image layout in the code and the actual layout, as seen previously.