JavaScript

Build Tic Tac Toe with JavaScript

Build a two-player Tic Tac Toe game from scratch using HTML, CSS, and JavaScript. Learn how to respond to clicks, manage game state, switch turns, detect wins and draws, and turn your code into a complete playable game.

Beginner
About 4 weeks
6 milestones
25 steps

HTMLCSSJavaScript

Start this journey

What you will have builtAt the end, they will have… a complete two-player Tic Tac Toe game that runs in the browser, responds to player actions, tracks the board and turns, detects wins and draws, and can be restarted and shared.Start this journey

What this asks of you

Every figure below is read from the journey itself, not written about it.

BeginnerNo prior experience needed

About 4 weeksAn estimate, not a deadline

6 milestonesEach one claims a capability

25 stepsShort, and every one is built

What you will be able to do

Every milestone claims one engineering capability. You reach it by building something, not by finishing a chapter.

Understand the GameExplain how a Tic Tac Toe game is structured, how players take turns, and how a game ends with a win or a draw.Before writing code, learners need to understand what they are building and what the program will need to keep track of. Understanding the board, turns, winning patterns, and draw condition gives every later piece of code a clear purpose.

4 steps

Show the 4 steps

Understand the Tic Tac Toe Board
Understand how the Tic Tac Toe board is organized and what makes a completed game.
Represent the Board in HTML
Create the nine positions of a Tic Tac Toe board using HTML.
Style the Game Board
Use CSS Grid to turn the nine HTML cells into a clear 3×3 Tic Tac Toe board.
Identify What the Game Needs to Remember
Identify the information the Tic Tac Toe program needs to remember while the game is being played.

Build the Game BoardCreate a styled Tic Tac Toe board in HTML and CSS that is ready for JavaScript interaction.The learner now understands the game and what its program needs to remember. This milestone turns that understanding into the actual project interface, creating the board that JavaScript will later make interactive.

4 steps

Show the 4 steps

Add the Game Status
Add a status area to the Tic Tac Toe interface that can later show information about the current game.
Give Each Cell a Position
Give each Tic Tac Toe cell a position that JavaScript can identify later.
Connect JavaScript to the Board
Use JavaScript to find the Tic Tac Toe board and its nine cells.
Read a Cell's Position
Use JavaScript to read the data-cell position stored on a Tic Tac Toe cell.

Make the Game InteractiveRespond to player clicks, place the correct mark on an empty cell, and switch turns between X and O.The learner has built the board, identified every cell, and connected the HTML to JavaScript. Now they have everything needed to make the game respond to a player's action.

4 steps

Show the 4 steps

Detect a Cell Click
Add a click listener to the Tic Tac Toe cells and identify which cell the player clicked.
Place the Current Player's Mark
Display the current player's mark inside the cell they click.
Switch Between Players
Switch the current player between X and O after each move.
Prevent a Played Cell from Changing
Prevent players from placing a new mark in a cell that has already been played.

Manage the Game StateKeep the Tic Tac Toe board state in JavaScript and keep it synchronized with what players see on the screen.The game can now accept valid moves, but future game logic needs reliable data to check the board. By maintaining the board state separately from the interface, the program can reason about moves, wins, draws, and resets.

4 steps

Show the 4 steps

Create the Board State
Create a JavaScript array that represents the nine positions of the Tic Tac Toe board.
Store Each Move
Update the JavaScript board state whenever a player makes a valid move.
Keep the Board and State in Sync
Make sure every valid move updates both the JavaScript board state and the visible game board.
Reset the Game
Reset the Tic Tac Toe board and game state so a new game can begin.

Know When the Game EndsCheck the Tic Tac Toe board for winning combinations and detect when a player has won or the game has ended in a draw.The game already records every move in a JavaScript array. That gives the program enough information to reason about the board. Now the learner can use that state to recognise winning patterns and determine when the game should stop.

4 steps

Show the 4 steps

Understand Winning Combinations
Represent the eight possible winning combinations in JavaScript.
Check for a Winner
Check the board state to determine whether the current player has completed a winning combination.
End the Game After a Win
Stop the game when a player completes a winning combination and show who won.
Detect a Draw
Detect when all nine cells are filled without a winner and end the game as a draw.

Make the Game Feel CompleteImprove a working JavaScript game with clear feedback, visual game-state cues, and a polished player experience.The game logic is now complete, so learners can safely improve the interface without changing the core rules. This milestone turns the working prototype into a clearer, more finished game.

5 steps

Show the 5 steps

Show the Winning Line
Visually identify the three cells that created the winning combination.
Improve Player Feedback
The game already knows whether it is in progress, has been won, or has ended in a draw. Now the learner makes that information clear to the person playing the game. Make the game status clearly communicate whether players are taking turns, someone has won, or the game has ended in a draw.
Polish the Game Interface
Improve the visual presentation of the Tic Tac Toe game so that the board, status, and controls are clear and comfortable to use.
Finish and Test the Game
Test the complete Tic Tac Toe game, fix any problems you find, and understand what you have built.
Optional: Save and Share Your Project with GitHub
You have built your Tic Tac Toe game. If you want to keep your project online and share your code with others, you can put it on GitHub. This is optional. You can complete the journey without creating a GitHub account.

How the work is verified

ReadThe context you need for this step, and why it matters. Never more than that.
BuildYou produce something real. The work is yours, in your own repository.
SubmitYou send it, with a note on what you chose and what you were unsure about.
ReviewA senior engineer reads it and responds. They may ask for changes — that is the normal path through engineering review, not a failure.
VerifiedThe capability is confirmed, it goes on your record, and the next step opens.

How you want to work

You choose when you start. Both cover the same journey and the same definition of done.

Mentor guidedReviewed by a person

A senior engineer is assigned to you. They read every submission, respond in writing, and decide when a capability is verified. Expect to be asked for changes.

Self pacedVerified by you

You work through the same journey and verify your own work against the same definition of done. Nothing is submitted to anyone, and nothing waits on anyone.

What you end up with

Counted from this journey, not described in general.

At the end, they will have… a complete two-player Tic Tac Toe game that runs in the browser, responds to player actions, tracks the board and turns, detects wins and draws, and can be restarted and shared.Built by you, in your own repository.

6 verified capabilitiesEach one confirmed against its definition of done, with the name of whoever confirmed it. There is no certificate. The work is the credential.

Ready to start Build Tic Tac Toe with JavaScript?

You will choose how you want to work on the next screen. Nothing starts until you confirm it. You can run several journeys at once, and each one is mentor-guided or self-paced on its own.

Start this journey