Learn Coding/Programming

★ Todo o conteúdo é traduzido automaticamente.

Eu fiz um jogo para aprender flexbox CSS chamado Flexbox Froggy. O objetivo do jogo é ajudar o sapo a alcançar o lírio escrevendo código CSS. Veja se você pode vencer todos os níveis!

O Flexbox Froggy é inspirado no clássico jogo de arcade Frogger e jogos de alfabetização na web como o excelente CSS Diner e Erase All Kittens, onde você pode aprender sobre seletores CSS e marcação HTML, respectivamente.

Eu escolhi CSS flexbox em parte porque suas propriedades de layout contribuem para uma boa mecânica de jogo. O nível do jogo é semelhante à atividade "Zombie Positioning" que apareceu no tutorial do Mozilla Thimble, mas usa um novo modelo flexbox poderoso em vez de posicionamento absoluto.

Flexbox é um bom tópico porque mesmo os iniciantes podem aprender esses métodos de posicionamento aprimorados imediatamente, mas muitos desenvolvedores web experientes que ainda não estão familiarizados com ele podem finalmente usá-lo. Isso significava que eu mesmo queria aprender por um tempo. Existem os melhores tutoriais para esse fim, como CSS Tricks, Codrops e Scotch.io, mas poucos têm experiências interativas de aprendizado.