6 jogos divertidos para ajudá-lo a aprender CSS facilmente

Aprender CSS pode ser uma experiência frustrante, mas pelo menos não precisa ser entediante! Uma das melhores coisas sobre aprender a codificar é que as pessoas que são boas em codificação também possuem as habilidades para fazer jogos que ensinam outras pessoas a codificar. Não há substituto para a prática e experimentação no aprendizado de CSS básico, mas os jogos definitivamente ajudam, e os modelos de layout mais recentes, como grade e flexbox, se beneficiam especialmente de um modelo de aprendizado prático.

Aqui estão alguns jogos que permitem que você domine CSS em nenhum momento.

1. CSS Diner: Seletores CSS

Muito básico, certo? Selecione elementos, classes, ids … talvez pseudo-classes? O que mais está lá? Na verdade, existem mais maneiras de selecionar elementos do que você imagina, e CSS Diner quer ensiná-los a usá-los, pedindo que você selecione alimentos com CSS. Alguns dos desafios podem ficar um pouco confusos, mas isso é codificação – não há vergonha em pesquisar no Google.

2. Flexbox Zombies

Flexbox Zombies é um jogo / curso incrivelmente bem desenvolvido que promete ensinar como usar o flexbox com um jogo intuitivo, envolvente e auto-reforçado que gira principalmente em torno de você atirando em zumbis com armas controladas pelo código do flexbox. Leva você desde o básico até o avançado ao longo de vários níveis que vêm completos com um enredo, gráficos interessantes e ação para matar zumbis – você pode até esquecer que está aprendendo CSS.

O próprio Flexbox é uma tecnologia incrível para organizar conteúdo responsivamente ao longo de uma dimensão, e se você faz algo com o desenvolvimento front-end da web, você deve aprender isso a si mesmo. Quer você tenha adiado ou não, Flexbox Zombies é uma excelente desculpa para jogar um jogo que realmente te ensina algo. Se toda a educação pudesse ser assim, certo?

O mesmo criador também projetou um curso de jogo para CSS Grid chamado “Grid Critters. ” Não é gratuito, mas se você gosta do Flexbox Zombies, pode optar por deixar o dinheiro nele.

3. Jardim de grade

Pessoalmente, acho que o flexbox é bom, mas realmente brilha em uma dimensão (linha ou coluna) layouts, portanto, para projetos e modelos maiores, você vai querer mudar para grade (talvez com alguns contêineres flexbox dentro das células da grade). Depois de descobrir isso, é simples, limpo e incrível, mas pode haver um pouco de curva de aprendizado que é onde Grid Garden (e os já mencionados Grid Critters) podem ajudar.

Grid Garden é um jogo gratuito onde você tem que fazer um jardim para que suas cenouras sejam regadas e as ervas daninhas sejam envenenadas – e acontece que a grade é perfeita para essa tarefa! Isso lhe dará uma compreensão sólida do posicionamento básico da grade que você pode aplicar aos layouts de seu próprio site

4. Defesa Flexbox

Já conhece os fundamentos do flexbox, mas não consegue manter “justificar” e “alinhar” de maneira correta? Flexbox Defense é um tutorial de flexbox disfarçado como um jogo de defesa que fará com que você se lembre de seu justify-content e se alinhe – ou morra. Mas você pode apenas tentar novamente. Se você nunca foi fã daqueles jogos que só aceitam uma resposta certa, você vai gostar deste, pois permite que você posicione as torres onde quiser e tenha sucesso ou fracasse por conta própria.

5. Flexbox Froggy

Você provavelmente conseguiria uma tarde inteira de jogos apenas lendo os tutoriais do Flexbox existentes, mas provavelmente é melhor espaçar por alguns dias ou semanas apenas para ter certeza de obter muitas atualizações de memória. Flexbox Froggy é perfeito para isso – não o tira do zero, mas se você se pegar esquecendo dos comandos, pode correr por este jogo em alguns minutos para voltar ao normal.

6. Jogos CodePip

Se você verificou Grid Garden e Flexbox Froggy, viu alguns exemplos de Trabalho do CodePip já. Esses são apenas os dois jogos gratuitos que eles oferecem. Se você se inscrever para uma conta profissional em seu site, eles também têm jogos que variam de revisão geral de CSS a JavaScript.

Quanto CSS isso vai me ensinar?

Executar esses jogos pode ajudá-lo a aprender alguns conceitos básicos muito bem – especialmente se você deseja aprender o flexbox. No final das contas, porém, os jogos só podem ensinar quais palavras digitar. Você terá que colocá-los em prática se quiser realmente descobrir como usá-los. Arranja um bom editor de código e algumas ideias que você deseja implementar e comece a brincar!