Jogos para praticar e aprender CSS

Aprender CSS pode ser um pouco complicado e frustrante no começo, mas com a prática e o tempo a forma de usar as propriedades e pra que elas servem vai ficando mais fácil. Existem alguns jeitos de praticar CSS, criando projetos pessoais, um blog, ou tentar copiar o layout de algum site existente, mas outra forma de praticar CSS é com jogos, sim, você não entendeu errado! Existem alguns sites que foram feitos para praticar e entender melhor as propriedades do CSS e no artigo de hoje vamos ver 6 exemplos desses jogos.

1. Flexbox Froggy

Flexbox Froggy é um joguinho fofo feito para passar os conceitos de Flexbox, ele ensina suas propriedades tendo explicações para cada uma delas, e você usa o que aprendeu para posicionar o sapinho no lugar certo. O jogo foi desenvolvido por Thomas Park. Link: https://flexboxfroggy.com/

2. CSS Battle

No CSS Battle é necessário replicar um dos layouts disponíveis com a menor quantidade de código possível, você pode competir com outros jogadores e entrar para o ranking de competidores. Link: https://cssbattle.dev/

3. Grid Garden

Parecido com o Flexbox Froggy, o Grid Garden tem o objetivo de ensinar os conceitos de Grid, suas propriedades e como utilizá-las. Aqui o objetivo é cuidar de um jardim com uma plantação de cenouras. Possui 20 níveis. Link: https://cssgridgarden.com/

4. CSS Diner

O CSS Diner ensina maneiras diferentes de usar os seletores de CSS como classes, ids, elementos e pseudo classes. O objetivo do jogo é selecionar elementos da tela da maneira correta. Link: https://flukeout.github.io/

5. Flexbox Zombies

Esse jogo é um pouco mais complexo que os anteriores, mas também foi feito para praticar o Flexbox, o objetivo é atirar em zumbis com armas que são controladas pelo código com Flexbox. O início do jogo é mais simples com as propriedades básicas e vai avançando e ficando mais complexo conforme os níveis vão aumentando. Link: https://mastery.games/flexboxzombies/

6. Flexbox Defense

Flexbox Defense é mais um jogo gratuito para praticar Flexbox, o objetivo do jogo é alinhar canhões e fazer sua defesa. Link: http://www.flexboxdefense.com/

Conclusão

Esses são alguns dos jogos mais conhecidos para praticar propriedades de CSS, como Flexbox e Grid, claro que não é possível aprender tudo de CSS apenas com esses jogos, mas eles são muito interessantes para entender de uma forma visual como algumas propriedades se comportam e também para colocá-las em prática!