Да, оказалось, что существует довольно много игр, помогающих учить CSS. Ниже подборка несколькох бесплатных CSS-игр, которые будут для вас полезны и, возможно, могут помочь повеселиться с CSS!

1. Flexbox Defense

Игра охватывает гибкие свойства align-items, justify-content, flex-direction, align-selfи order в 12 различных уровнях. Особенно последние 4 уровня действительно веселые и даже немного хитрые.

Игра: http://www.flexboxdefense.com 

2. Flexbox Froggy

Эта игра также о Flexbox и охватывает еще более гибкие свойства: align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flowи order в 24 различных уровнях. 

Игра: https://flexboxfroggy.com 

3. Grid Garden

В 28 различных уровнях вы можете изучить CSS Grid Layout. Она включает в себя следующие свойства: grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end, grid-row, grid-area, order, grid-template-columns, grid-template-rows и grid-template.

Игра: https://cssgridgarden.com

4. CSS Diner

Это небольшая игра о всевозможных селекторах CSS. Попробуйте освоить все 32 уровня, чтобы назвать себя экспертом.

Игра: http://flukeout.github.io

5. Unfold

Это не совсем игра, а скорее интерактивная презентация о CSS 3D Transforms. Анимация там просто огонь, и вы бы даже не подумали, что это возможно с чистым CSS.

Игра: https://rupl.github.io/unfold

6. Roadmap

Необходимы навыки и скорость, чтобы решить эту маленькую игру, созданную только с помощью CSS и HTML. Это не прямое обучение CSS, но изучение исходного кода многому учит clip-path, transformи animationс @keyframes!

Игра: http://victordarras.fr/cssgame 

7. Carnival

У вас есть только 8 секунд, чтобы поразить все цели! Хорошая маленькая CSS-игра, использующая флажки и CSS-анимацию. то не прямое обучение CSS, но изучение исходного кода

Игра: https://codepen.io/una/pen/NxZaNr 

8. Крестики-нолики

И наконец классика. Tic-Tac-Toe как чистая CSS-игра с 2 уровнями сложности, также с использованием флажков и CSS-анимацией.

Игра: https://codepen.io/alvaromontoro/pen/BexWOw 

Неважно, новичок вы или эксперт - вам будет весело играть и в то же время узнавать что-то о CSS! Особенно на Codepen вы можете найти множество потрясающих игр, с использованием HTML и CSS.