This month’s CodePen challenge theme is board games, which I am so excited about because I LOVE board games. Settlers of Catan is my current favorite, but my friends just gifted me with a cat version of Monopoly (Catopoly, of course) that may steal the top spot.

For this specific challenge, I created a Monopoly-inspired flip-card game. The goal is to match the properties to their color; it’s not a terribly exciting concept, but my focus at this point is to practice my coding skills. And I really wanted to figure out how to make boxes flip!

I thought I would make that happen with Javascript, but I ended up using CSS animations to make the cards flip over on the click of the mouse.

I used CSS Grid to create the game board, which was also a new experience for me. I used a W3C tutorial to help me figure out the card-flipping animation.

I’m interested in trying this out with a memory-type game – just replace the text on the back of the cards with an image! Although, since I’m using the free version of CodePen right now, I would probably stick with matching words. But fun words.