Essa lista de links sobre CSS tá faz um tempão parada no meu nirvana, eu não sei o que fazer com ela, então resolvi compartilhar para não perder ou esquecer!
Pipocaram vários jogos ensinando programação, alguns voltados para o ensino infantil com o arrastar de blocos, programação com minecraft, e etc. Outros vieram numa pegada mais Duolingo, gamificando o aprendizado, que é o caso desses três:
Ambientado na cozinha, com louça e comida, o CSS Dinner se propões a ensinar seletores CSS com 32 desafios incluindo seletores por id, class, atributos, pseudo-classes, entre outros.
Já o Flexbox Defense, como diz o nome, pretende ensinar Flexbox através de um jogo de estratégia, sendo que você deve criar uma boa defesa usando CSS flexbox para posicionar suas torres.
Já o Grid Garden te coloca num dia de agricultor, aprendendo grid posicionando sementes, plantas, e água.
É sempre bom aprender aquelas linhas mágicas que evitam que você tenha um trabalhão, tipo um caracter especial que te ajuda a controlar a quebra de linha que eu compartilhei no último post. É isso que está presente no post e nos links a seguir:
O 1 line layouts apresenta alguns layouts bem comuns em CSS, que você precisa fazer a todo momento quando está trabalhando em algum projeto web. Das várias formas para criar um layout, posicionar um elemento, quem não quer uma linhazinha mágica ali pra evitar horas escrevendo CSS 😉.
Já o CSS Layout tem de tudo. Quer fazer uma fita com CSS? Tem! Quer fazer um balão de fala tipo de história em quadrinho? Tem também! As modas vem e vão, mas sempre tem alguma influência delas que permanecem. Então, sempre que precisar fazer uma dessas paradas que já viu por todo lado, vale tentar fazer sozinho para o aprendizado e/ou consultar o CSS Layout para gabarito/velocidade!
O livro CSS Secrets aborda vários desses casos que uma linha ou um conhecimento um pouco mais profundo de CSS pode te ajudar bastante! O livro aprofunda muito mais em cada caso. Vale a pena!