style.css (to make our game look halfway decent).index.html (will hold our UI structure and import the other files we need).We’ll start by building the user interface so we have something to look at while building the game logic.Īs I mentioned this is a simple game so there is no need for complicated folder structures. Let’s get to the fun part and build something! That’s it, nothing special or overly complicated but still an excellent opportunity to practice and improve. either stop the game or change the active player, depending on the above.needs to make sure nothing happens if an already played cell has been.needs to check if a valid move has been made.needs to track any clicks that happen on our cells.Next, let’s break down the game flow for a cell click: should show us if the game ended in a draw.should display a message informing the current player it’s their turn.the grid cells should have the correct player sign displayed.Well, usually the best way to start would be to break down the application into smaller, easily digestible pieces.įirst, let’s break down the user interface: The big question then… Where do we start? Let’s first take a look at the end product We’ll cover some basics like using CSS grid, query selectors and structuring our game flow and logic. Well look no further, today we’ll be building a simple ( drumroll) Tic Tac Toe game. You can find the completed project on my Github here. Have you wanted to build something fun and simple to practice your Front End skills but the thought of building another TODO application makes you want to quit this wonderful path you’ve started on?

X and o game