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á-lo 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 legais 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 alguma coisa com desenvolvimento front-end da web, você deve aprender isso consigo 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ê deve mudar para grade (talvez com alguns contêineres flexbox dentro das células da grade). Depois de descobrir, é 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 em que você deve fazer um jardim para que suas cenouras sejam regadas e as ervas daninhas 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 o básico do flexbox, mas não consegue manter “justificar” e “alinhar” de maneira correta? Flexbox Defense é um tutorial de flexbox disfarçado de 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 aceitam apenas 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çá-los 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 vir esquecendo os 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?
A execução desses jogos pode ajudá-lo a aprender alguns conceitos básicos muito bem – especialmente se você quiser aprender o flexbox. Em última análise, 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!
