This is the game that will be used as a project for the end of the chapter. The goal of this project is not for the creation of the game but to use the CSS layout properties to lay out the game and instructions. In my version, I am taking advantage of flex, grid, and media queries to have a game that will adjust its size and layout based on the display resolution (and orientation if applicable).
The game play is your typical hotseat tic-tac-toe game. Player X clicks on an empty tile, then Player O does the same. This continues until a horizontal, vertical, or diagonal line of the same symbol is formed in which case that player is the winner. In the case that the board is filled with no winner, we say it is the cat’s game.
The big thing here is to name your tiles in a way that it is easy to access them so you can quickly check to see if they are a winning combination.
While you are certainly welcome to create a computer opponent, this is overkill for this project and is easier to do with arrays and objects which will be covered in the next chapter.
This chapter's summary cheat sheet.
Why layout is complicated for web pages.
The basic display types.
A box that contains other components and sizes them to fit the available space.
A flexible grid where you can lay out your design.
Using templates to make laying out components in a grid easy.
Using the columns attributes to easily allow for multiple columns.
Having images (or other blocks) have text wrap around them.
There are other ways of placing elements by using the position attribute.
Altering CSS based on the properties of the device the page is being rendered on.
The project for this chapter.
Solution for this chapter's project