So I’m currently enrolled in a Software engineering class and one of the activities is making an 8×8 Chessboard using flex.

There are a couple of criteria for this activity or should I say User Stories.

1. Create a chessboard using flex
2. All 64 squares should always be visible (zoomed in or out, no scrolling regardless of monitor size)
3. All 64 squares should always be squares (no rectangles, equal length on all sides)
4. [optional] add chessboard pieces

The first issue to tackle, I made my Chessboard purely HTML/CSS so I created 64 divs for the boxes inside a container.

We also need to make all 64 squares visible even if you resize the screen or use Firefox’s Page Inspector to view and make sure that the boxes are all squares.

See the Pen 8×8 Chessboard – Flex by Xoomvision (@jarencudilla) on CodePen.dark

You can also check out the code in Github.

The post Making an 8×8 Chessboard using Flex (HTML/CSS) appeared first on Jaren Cudilla.