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:


Posts relacionados


Deixe um comentário

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.