Aprenda CSS de forma divertida: 5 jogos para dominar suas habilidades
Desde que iniciei minha jornada no curso de Análise e Desenvolvimento de Sistemas, me deparei com muitas possibilidades de atuação no mercado. No entanto, foi no desenvolvimento web que me apaixonei. Mas, nem tudo são flores, ao mergulhar nas linguagens fundamentais (HTML, CSS e JavaScript) enfrentei desafios, especialmente ao lidar com os conceitos das Flexbox. Foi então que, navegando pela internet, descobri joguinhos que transformaram minha compreensão e domínio do CSS. Compartilho neste artigo cinco desses jogos que não apenas ensinam, mas também incentivam a exploração e o aprimoramento das habilidades em CSS e seus estilos.
Nada como começar pelo básico, o CSS Diner é realmente divertido e genuinamente educativo para desenvolvedores de todos os níveis de habilidade. Você passará por 26 níveis diferentes de dificuldade crescente. Nos primeiros níveis, você aprenderá fundamentos essenciais, como seletores de elementos e seletores de classes. Nos níveis posteriores, você lidará com conceitos avançados, como :only-of-type e :not(x).
Vamos cuidar de um jardim? O jogo Grid Garden apresenta 28 níveis. Use as diversas propriedades da grid para regar e cultivar seu jardim de cenouras. Grid Garden possui uma área para que você veja instantaneamente o resultado de suas ações e suas cenouras crescendo.
Esse aqui me ajudou bastante para entender FlexBox. Nele, utilizamos Flexbox para posicionar a besta do herói, acertar os zumbis e sobreviver ao longo do jogo. Cada fase desvenda parte da história e apresenta desafios de sobrevivência contra zumbis que obrigam você a solidificar suas novas habilidades como se sua vida dependesse disso.
Obs: O jogo diz ter um preço de 179 dólares mas ele está de graça quando estou escrevendo esse artigo
Caso o último jogo esteja pago, não se preocupe. Esse sapinho também aborda o Flexbox e explora propriedades flexíveis como justify-content, align-content, flex-direction, align-self em 24 níveis diferentes.
Esse aqui é pra você que já jogou o resto, agora tem que provar que aprendeu. Nesse jogo você precisa adivinhar qual seletor corresponde ao resultado que você vê. Além disso, não está limitado a partes específicas do CSS e inclui muitas diferentes.
CSSBattle é pra você que é mais avançado e gosta de competitividade já que o é multiplayer online com 300K+ de desenvolvedores jogando ele, contendo até ranking. O jogo desafia os jogadores a construírem imagens usando CSS, recebendo um conjunto de restrições de design, nas quais eles devem usar suas habilidades em CSS para replicar os alvos com o menor código possível.
Conclusão
Sei que às vezes paramos de aprender algo por considerar muito difícil ou por não querermos nos preocupar demais com isso, mas aqui trouxe algumas maneiras descontraídas para você aprender e se divertir. Esta é também uma alternativa para quem não sabe como praticar, afinal, a prática leva à perfeição. Ficaria feliz se alguns desses consiga te ajudar, assim como me ajudaram bastante. Então, que tal jogarmos um pouco?
