Texto de: Letícia Garcez
Introdução
Sem dúvida, dominar CSS é indispensável para quem quer trabalhar com desenvolvimento frontend, no entanto, estudar CSS nem sempre é a coisa mais legal do mundo. Isso faz com que seja fácil se desmotivar com o aprendizado da tecnologia após passar horas tentando centralizar uma div. Por isso, neste artigo te apresento alguns jogos que podem te ajudar a estudar CSS de uma forma divertida.
Flexbox Adventure
O jogo Flexbox Adventure é uma espécie de RPG onde você precisa posicionar personagens em determinadas posições do tabuleiro usando flexbox para pegar itens ou derrotar inimigos. O jogo conta com 24 níveis e 3 dificuldades diferentes, onde você pode aprimorar o seu conhecimento de flexbox.
Um lado negativo do jogo, no entanto, é que ele está disponível apenas em inglês. Sendo assim, caso você não tenha domínio da língua, será preciso utilizar alguma ferramenta, como a extensão do Google Tradutor, que pode fazer com a sua experiência não seja a melhor possível.
Flexbox Froggy
Flexbox Froggy é um dos jogos mais famosos para treinar flexbox. Nele, você deve utilizar o flexbox para posicionar sapos coloridos nas vitórias-régias de mesma cor. Este projeto possui tradução para várias línguas, incluindo português.
Grid Attack
O jogo Grid Attack é uma espécie de RPG onde você precisa posicionar áreas coloridas dentro dos espaços envolvidos com uma linha tracejada da mesma cor usando CSS Grid para derrotar inimigos. Este jogo conta com 80 níveis e 3 níveis diferentes de dificuldade, porém só está disponível em inglês.
Grid Garden
No jogo Grid Garden, você precisa cuidar de uma horta utilizando o CSS Grid. O jogo conta com 28 níveis onde você deve posicionar água em plantas saudáveis e veneno em ervas daninhas. O jogo conta também com tradução para português.
CSS Speedrun
CSS Speedrun é um jogo com 10 níveis onde você deve escrever no campo de input o seletor CSS que corresponde aos elementos indicados com uma seta no HTML mostrado na tela. O jogo também nos proporciona algumas dicas sobre que tipo de seletor precisamos usar, o que pode ser bastante útil para a solução dos níveis.
CSS Diner
O jogo CSS Diner conta com 32 níveis também apenas em língua inglesa, onde você deve selecionar elementos de uma mesa. Neste jogo, você tem acesso a um editor CSS (retângulo branco no lado direito da imagem) e a um visualizador HTML (retângulo escuro na esquerda da imagem) com o HTML utilizado para criar a mesa que é renderizada na tela. Para avançar de nível, basta digitar no editor de CSS o seletor que irá selecionar os elementos indicados.
Guess CSS
O jogo Guess CSS conta com uma imagem de uma tela gerada com HTML e CSS, o HTML usado e três opções de CSS. Você deve então selecionar a opção de CSS que irá fazer com que o HTML mostrado seja formatado conforme a figura. No topo da página, temos um placar onde é mostrado quantos acertos e quantos erros você fez.
Considerações finais
Neste artigo, conhecemos alguns jogos que podem ser utilizados para melhorar as suas habilidades em CSS de uma forma divertida.
