FlexboxFroggy – Como aprender CSS Flexbox, jogando

Froggy - O sapinho que você tem que posicionar usando CSS Flexbox no FlexboxFroggyQuando a internet começou, tínhamos recursos muito básicos implementados nos navegadores, e por isso os sites normalmente eram feitos sem muita estrutura, apenas contendo textos e sem muitos estilos aplicados. Depois de algum tempo, a internet evoluiu um pouquinho, e os sites começarem a ser mais estruturados, com barras laterais, menus, cabeçalho e rodapé melhor definidos, através do uso de tags <table>. Depois de mais algum tempo, começou a surgir a prática do tableless, que usava CSS para criar sites estruturados sem o uso de tags <table>. E, a partir dessa prática do tableless, surgiu incontáveis bibliotecas de grid, normalmente (mas não necessariamente) integrada a frameworks CSS, como o Bootstrap e o Foundation, que facilitam e muito a criação de sites tableless com o uso de grids pré-definidas (normalmente de 12 colunas). Com a evolução do HTML5 e do CSS3, entretanto, novas técnicas de organizar conteúdo na tela estão surgindo, e hoje vou falar sobre um jeito prático de aprender uma dessas novas técnicas, chamada Flexbox, jogando.

O CSS Flexbox veio para ajudar desenvolvedores a resolver muitos dos problemas que aconteciam em montagens de layout usando CSS, permitindo muito mais flexibilidade (daí o termo “Flex” do nome) na organização do conteúdo da página. Com o CSS Flexbox, por exemplo, você consegue organizar os conteúdos verticalmente, centralizando elementos na frente da tela de forma bem simples, algo que reconhecidamente era algo bem chato no CSS. Só que, como toda nova tecnologia, o CSS Flexbox não é algo fácil de se acostumar a usar, e sua especificação não é exatamente..simples. Tornando esta baita técnica um pouco mais distante dos desenvolvedores mais iniciantes.

Por isso que hoje vou falar um pouco sobre o FlexboxFroggy, um jogo simples e bem prático para quem já manja CSS e quer conhecer essa nova especificação sobre organização de conteúdo. No jogo, você precisa, a cada “fase”, organizar elementos na página apenas usando CSS Flexbox, contando com o auxilio, claro, de uma breve descrição sobre o cada nova propriedade aprendida. Parece ser uma boa técnica para iniciar o treinamento das novas propriedades fornecidas pelo CSS Flexbox. No final, o usuário é tem que usar todas as propriedades vistas no jogo para organizar os elementos de forma mais completa, garantindo assim que o usuário saiba a função de cada propriedade no CSS Flexbox.

Para terminar, o jogo tem código aberto, é totalmente gratuito, pode ser jogado sem a necessidade de instalar nada no computador ou no navegador e já foi traduzido para português, sendo portanto acessível mesmo aos mais iniciantes na área. Fica os links:

Gostou do conteúdo desse post? Apoie o blog pagando a partir de R$1/mês através da nossa página no Apoia.se! Isso me ajudará a manter o blog no ar, além de trazer mais coisas legais para vocês! Obrigado desde já! 😀