Então vamos continuar na sala, vamos fazer a estrutura de HTML para o jogo da velha. Então vamos abrir o... Vamos primeiro, eu recomendo você criar uma pasta para o seu projeto. Eu já criei aqui, vou para o meu editor de texto, que é o Atom. Eu criei a pasta-jogo da velha, tá? Nessa pasta vamos criar os seguintes arquivos. Primeiro vai ser o arquivo index.html. Vai conter a estrutura do... Nossa página, tá? Então vamos lá. Vamos falar primeiro o doc type, para poder dizer que está usando HTML5, tá? Doc type HTML. Tá? Sinal de... Abre a tag. Sinal de esclamação doc type. Espaço HTML. Fecha tag. Aí começa a tag. Abre tag de HTML. Tá? Vou fechar na mesma hora para não esquecer. Dentro da tag de HTML, eu adicione indetação só para o estilo. Vou definir a head. Tá? Cabeça. E depois da cabeça, define o body. E fecha tag, para não esquecer depois. Dentro da head vou adicionar uma tag, tá? Meta. Care Set, o TF8, para usar o TF8. Unicode, tá? Esses caracteres, vou definir uma tag de título. Vou fazer... Vou escrever jogo da velha como título do documento, tá? Aí aqui no body, a gente vai fazer a estrutura que a gente tinha falado antes. Deixa eu abrir esse cara aqui. Então vamos fazer aquela estrutura de antes. Primeiro a gente vai fazer um adiv, que vai ser o tabuleiro inteiro, tá certo? Então, essa dev vai ter um id tabuleiro, tá? Agora, dentro do tabuleiro vai ter nove espaços. Eu vou criar um adiv para cada um desse espaço. Dev vai ter classe. Vou chamar classe espaço, tá? E o id a gente vai definir já, já, tá? Então vamos fazer nove desses caras, tá? Eu vou duplicar essa linha nove vezes. 2, 3, 4, 5, 6, 7, 8, 9, tá? Agora, vamos dar o id seguindo aquela convenção que a gente aprendeu. Isso lembra? Então, do topo para baixo, da esquerda para a direita, começa no esquerda acima, vai para o centro acima, direita acima, depois esquerda, centro direita, depois esquerda abaixo, centro abaixo e direita abaixo. Então vamos lá. Primeiro o id vai ser esquerda, traço acima. Do segundo, centro acima. Do terceiro, direita acima. Agora, segunda linha da esquerda para a direita, esquerda, centro direita. Última linha da esquerda para a direita. Esquerda abaixo, centro abaixo, direita, traço abaixo. Deixa eu aumentar a tela para você ver. Vou enlargar. Tá? Então tá aí. Cada espaço do tabuleiro com o id. Tá certo? Vamos salvar essa página e rodar. Então você pode abrir essa página index.html no seu navegador. Tá? No meu caso, ao invés de fazer isso, eu vou usar um pacote de NPM. Eu vou no terminal aqui. Estou dentro da página do projeto, da pasta do projeto. Vou dizer NPM, install, traço G. Vou instalar o pacote globalmente. O pacote, o nome chamado reload. Tá? Esse pacote, eu posso usar. Eu estou usando node 10.3.0 com NPM. 6.4.1, tá certo? Então eu vou dar reload, espaço, opção, traço B. Fazendo isso, ele vai abrir o navegador. Tá? E vai abrir a página index.html, tá certo? Eu estou na pasta de jogo da velha que tem um index.html. Ele vai rodar o servidor aqui. E eu posso escrever o código. E na maneira que eu escrevo, ele vai automaticamente atualizar. Não precisa ficar clicando, voltar o navegador e clicar atualizar todo o tempo. Então não tem nada na página porque as divas estão em branco, né? Então você nota que você dá um inspector. E... Olhar. Você nota que a tabuleira está aqui. Tá? E cada... O espaço está lá, mas não tem nenhuma largura, né? A dev só tem a largura inteira da tela, mas não tem a altura, né? Então não vê nada. Então vamos mudar isso na próxima hora, tá certo? Então até lá.