Today I worked on the UI layout.

I started with using flexbox to center the main game UI, I created a flex-container class with my only flex item being the grid container for the grid. Next, I'm arranged the elements with CSS grid to fit the mockup I created.

I ended up removing some container classes I created when I was using flexboxes because they are not longer applicable. I was having issues setting the flex-container to take up the whole screen and ended up Googling it. I found a good article that helped: https://softauthor.com/css-make-a-div-height-full-screen/.

After messing around with grid and its properties. I was able to set up a 3 by 3 grid. It's more or less coming together.

I think I have it at a good place to start working on the JavaScript and then come back to make it better.

Make it work, Make it right, Make it better

Resources

The Odin Project
Revisiting Rock Paper Scissors