8.13 - Exercício M08-E01

Objetivos

  • Praticar o uso de seletores CSS.

Instruções

Neste exercício, vamos praticar o uso de seletores CSS usando o jogo CSS Diner — Where we feast on CSS Selectors! (http://flukeout.github.io/). Para começar, abra este link no seu navegador.

A ideia do jogo é usar seletores CSS para selecionar objetos que estão sobre uma mesa de jantar. Existem 32 níveis no jogo e, a cada nível, os seletores vão ficando mais complexos. Vamos completar o primeiro nível juntos, para você entender melhor como funciona.

Exemplo: resolução do nível 1

  1. Certifique-se de que você está no primeiro nível: na primeira linha do painel à direita da página, deve estar escrito Level 1 of 32.

  2. O enunciado do nível fica no topo da página. Portanto, no nível 1 o enunciado é “Select the plates” (“Selecione os pratos”), o que significa que devemos usar um seletor CSS que vai selecionar os dois pratos que estão sobre a mesa.

  3. Abaixo da mesa, na área HTML Viewer, fica o HTML que corresponde à nossa “mesa de jantar”. Esse HTML será diferente para cada nível do jogo, e você vai precisar analisá-lo para entender como montar o seu seletor. Por exemplo, nesse nível, vemos que existe uma <div> que representa a mesa e que, dentro dela, existem dois elementos <plate>, cada um correspondente a um prato.

  4. Nós precisamos selecionar os pratos, certo? Portanto, considerando o HTML que foi dado, o seletor mais simples que podemos usar é apenas plate, que é um seletor de elemento. Assim, digite “plate” na linha 1 do painel CSS Editor, que fica à esquerda do HTML, e pressione Enter.

  5. Pronto! A mesa foi reordenada, e agora você está no nível 2 do jogo (Select the bento boxes).

Mais informações sobre o jogo

  • Quando você digita um seletor incorreto e aperta Enter, o painel com os editores de CSS e HTML “treme”. Ou seja, se o painel tremer, é porque você não acertou ainda.

  • O painel à direita tem uma pequena documentação que é relevante para cada nível. Por exemplo, nos níveis 1 e 2, repare que a documentação é sobre seletores de tipo (Type Selector), o que já é uma dica do tipo de seletor que você vai precisar usar nestes níveis.

  • O jogo completo contém 32 níveis e recomendamos que você complete todos

Correção do exercício

Não haverá correção para o exercício 8.1 através da ferramenta ep. Você deve chegar até o fim do jogo.