Build the game board
Create the UI that players actually see and click
⏱ Est. ~7 min
01 · Read
Your server is ready. Now you need a face — the HTML page that players see in the browser.
This is plain HTML, CSS, and JavaScript. No React, no framework. Just the web fundamentals every framework is built on.
That's intentional. Frameworks are great for big apps, but understanding what's happening without them makes you a much stronger engineer. When React breaks, the engineer who understands raw HTML and JavaScript fixes it in minutes. The one who only knows React stares at the error for hours.
Key points
- The front end is plain HTML, CSS, and JavaScript
- A game this size doesn't need a framework
- Understanding the fundamentals makes you better with any framework later
- Socket.io automatically serves its own client library
02 · Prompt template
Ask Claude to build the game page. Be specific about the elements you need.
Help me create public/index.html for the tic-tac-toe game. It should include: (1) A title 'Tic Tac Toe'. (2) A 'Find Game' button. (3) A status area that initially shows 'Click Find Game to start'. (4) A 3x3 game board where each cell is a clickable button element. (5) A 'Play Again' button that's hidden by default and shown after the game ends. Include the Socket.io client script from '/socket.io/socket.io.js' (Socket.io serves this file automatically), and link to style.css and client.js.
03 · Prompt template
Now ask Claude to style the game. Give it specific design direction.
Help me create public/style.css for the tic-tac-toe game. Build the board as a 3x3 CSS grid, each cell 100x100 pixels. Add clear borders between cells, with a hover effect on empty cells. Center everything on the page with a dark background. Make X blue and O red. Make the Find Game button prominent. Add a subtle scale animation when a symbol is placed. The overall feel should be clean and modern.
04 · Read
The key CSS pattern that makes the board work is CSS Grid. Instead of complex table layouts or flexbox hacks, CSS Grid builds a 3x3 board in three lines:
``css .board { display: grid; grid-template-columns: repeat(3, 100px); gap: 4px; } ``
That's it. Three columns, each 100 pixels wide, with a 4-pixel gap between cells. The browser handles all the layout math. Each cell is a <button> element inside the grid — use buttons instead of divs because buttons are keyboard-focusable and screen-reader accessible by default.
Key points
- CSS Grid makes 3x3 layouts simple
- repeat(3, 100px) creates three equal columns
- Each cell is a <button> for keyboard and screen-reader accessibility
- Socket.io serves its own client script at /socket.io/socket.io.js
05 · Real-machine exercise
Start your server and preview the game board in the browser.
06 · Quiz
Why use <button> elements for the board cells instead of <div> elements?
- Buttons look better by default
- Divs can't have click event listeners
- Buttons are keyboard-focusable and screen-reader accessible, making the game usable for all players
- Socket.io only works with button elements
Other lessons in this chapter
⚠ The full interactive experience needs JavaScript. Please enable it and reload.
※ This is an independent Traditional Chinese teaching project — not an official Anthropic product. Claude™ is a trademark of Anthropic, PBC.