Construir o tabuleiro
Criar a UI que os jogadores vão ver e clicar de verdade
⏱ Estim. ~7 min
01 · Ler
Seu servidor está pronto. Agora você precisa da cara — a página HTML que os jogadores veem no navegador.
Isso é HTML, CSS e JavaScript puros. Sem React, sem framework. Só os fundamentos da web sobre os quais todos os frameworks são construídos.
Isso é proposital. Frameworks são ótimos para apps grandes, mas entender o que acontece sem eles deixa você muito mais forte como dev. Quando o React quebra, quem entende HTML e JavaScript puros conserta em minutos. Quem só entende React fica olhando para o erro por horas.
Pontos-chave
- Front-end é HTML, CSS e JavaScript puros
- Um jogo desse tamanho não precisa de framework
- Entender o básico te deixa melhor com qualquer framework depois
- Socket.io oferece a própria biblioteca de cliente automaticamente
02 · Modelo de prompt
Peça ao Claude para criar a página do jogo. Seja específico sobre os elementos que você precisa.
Me ajuda a criar um public/index.html para o jogo da velha. O conteúdo deve incluir: (1) um título 'Tic Tac Toe'; (2) um botão 'Find Game'; (3) uma área de status que mostra inicialmente 'Click Find Game to start'; (4) um tabuleiro 3x3 em que cada célula é um elemento button clicável; (5) um botão 'Play Again' escondido por padrão, que aparece quando o jogo termina. Inclua o script de cliente do Socket.io em '/socket.io/socket.io.js' (o Socket.io serve esse arquivo automaticamente) e referencie style.css e client.js.
03 · Modelo de prompt
Agora peça ao Claude para estilizar o jogo. Passe instruções de design concretas.
Me ajuda a criar um public/style.css para o jogo da velha. Faça o tabuleiro como uma grid CSS 3x3, cada célula com 100x100 pixels. As células precisam de bordas nítidas entre si e efeito de hover quando estão vazias. Centralize a tela inteira e use fundo escuro. X em azul, O em vermelho. Destaque o botão Find Game. Adicione uma animação sutil de escala quando os símbolos forem colocados. A vibe geral deve ser limpa e moderna.
04 · Ler
O padrão CSS chave que faz o tabuleiro funcionar é o CSS Grid. Em vez de layouts complicados com table ou gambiarras com flexbox, o CSS Grid monta um tabuleiro 3x3 em três linhas: ``css .board { display: grid; grid-template-columns: repeat(3, 100px); gap: 4px; } ``
É isso. Três colunas, cada uma com 100 pixels de largura, com 4 pixels de gap entre as células. O navegador cuida de toda a matemática do layout. Cada célula é um elemento <button> dentro da grid — usamos button em vez de div porque button já vem com foco por teclado e acessibilidade para leitores de tela por padrão.
Pontos-chave
- CSS Grid torna o layout 3x3 simples
- repeat(3, 100px) cria três colunas iguais
- Cada célula é um <button> para acessibilidade de teclado e leitores de tela
- Socket.io serve o próprio script de cliente em /socket.io/socket.io.js
05 · Prática real
Suba seu servidor e veja o tabuleiro no navegador.
06 · Quiz
Por que usar <button> em vez de <div> para as células do tabuleiro?
- Button fica melhor visualmente por padrão
- Div não pode ter event listener de clique
- Button é focável por teclado e acessível a leitores de tela, e isso permite que todos os jogadores joguem
- Socket.io só funciona com elementos button
Outras lições deste capítulo
⚠ A experiência interativa completa precisa de JavaScript. Ative-o e recarregue a página.
※ Este é um projeto educacional independente — não é um produto oficial da Anthropic. Claude™ é uma marca registrada da Anthropic, PBC.