Ensine-se CSS Flexbox com o jogo Froggy Flexbox
No passado, mostramos o flexbox e o básico de como funciona. Mas, na verdade, aplicar o flexbox ao seu fluxo de trabalho pode ser um desafio porque é uma adição tão complicada à especificação CSS.
Com o Flexbox Froggy você pode Aprenda todos os conceitos básicos do flexbox com um jogo divertido envolvendo rãs e lilypads. Eu sei que parece loucura, mas isso é seriamente uma aplicação web incrível.
Você começa no nível 1 e lentamente trabalhe seu caminho através de 24 níveis diferentes ensinando os muitos aspectos da orientação do flexbox. Os primeiros níveis começam com facilidade, pedindo-lhe para alinhe um ou dois sapos ao longo de um único recipiente. As primeiras aulas também incluem dicas e sugestões para ajudá-lo ao longo do caminho.
Mas uma vez que você passa da lição 10, as coisas realmente esquentam. Você precisa aprender como voltar-organizar itens dentro de um contêiner, como organizar conteúdo verticalmente, e como criar espaçamento equidistante entre diferentes linhas de conteúdo diferente.
Os sapinhos fofos podem atraí-lo, mas tenha certeza de que este é um jogo difícil.
Contudo, de novatos completos a desenvolvedores web mais experientes, o jogo é feito para todos os níveis. As lições iniciais são uma brisa e as lições posteriores podem deixar você debruçado sobre a tela com tufos de cabelo ao seu lado.
O código fonte completo do jogo está disponível gratuitamente no GitHub para que você possa baixá-lo e reproduzi-lo localmente, se desejar.
Além disso, o webapp é multilíngue oferecendo 20 idiomas incluindo inglês, francês, alemão, italiano, chinês, japonês e russo (além de muitos outros).
Eu vou admitir que rearranjar rãs não fará de você um mestre imediatamente de flexbox. Mas essas lições são destinadas a familiarize-se com a sintaxe do flexbox para que você possa se sentir mais confortável trabalhando em cenários do mundo real.
Se você é um desenvolvedor web de qualquer nível de habilidade você deve definitivamente verificar o Flexbox Froggy. É completamente grátis, muito divertido de jogar e surpreendentemente educativo.
