12 бесплатных игр для изучения CSS

0
2737
views

Перевод статьи «8 Games to learn CSS the fun way».

Бесплатные игры для изучения CSS

Должен признать, мне сложно запоминать многие вещи. Особенно те, что касаются CSS. Например, Flexbox Layout. Свойство flex-контейнера justify-content может иметь больше 12 различных значений, многие из которых могут комбинироваться с ключевыми словами safe или unsafe.

Можно, конечно, читать различные статьи, но они длинные и раскрывают не все темы. Но вот недавно я наткнулся на одну игру…

Погодите, что?

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

1. Flexbox Defense

Flexbox Defense

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

2. Flexbox Froggy

Flexbox Froggy

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

3. Grid Garden

Grid Garden - игра для изучения CSS

Игра предлагает изучение CSS Grid Layout на 28 разных уровнях. Освещены следующие свойства grid: 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.

4. CSS Diner

CSS Diner - игра для изучения CSS

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

5. Unfold

Unfold

Это скорее даже не игра, а интерактивная презентация 3D-трансформаций в CSS. Вам может показаться, что это скучно, но поверьте мне: анимации там просто крутые, вы даже не поверите, что такое можно сделать на чистом CSS.

6. Roadmap

Roadmap

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

7. Carnival

Carnival - игра для изучения CSS

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

8. Tic-Tac-Toe

Tic-Tac-Toe

И, наконец, классика. Tic-Tac-Toe («крестики-нолики») — игра на чистом CSS, с двумя уровнями сложности. Также использует чекбоксы и CSS-анимации.

9. Flexbox Zombies

Flexbox Zombies

Игра с сюжетом. По ходу игры вы учитесь использовать Flexbox и арбалет для охоты на зомби. Необходима регистрация.

10. Service Workies

Service Workies

Благодаря этой игре вы научитесь избегать ловушек PWA и работать с Service Workers. Возможно, даже поубиваете диких зверей, веками досаждающих бедным крестьянам! Требуется регистрация.

11. Grid Critters

Grid Critters - игра для изучения CSS

Ваш путь освоения CSS Grid начинается на загадочной планете Grideros. Ваша миссия — использовать мощный инструментарий вашего корабля (Grid) для спасения инопланетных животных от вымирания. Требуется регистрация.

Двенадцатую игру мы взяли из статьи «Train your CSS skills with online games».

12. CSS Battle

CSS Battle - игра для изучения CSS

В игре CSS Battle вам нужно повторить заданный макет при помощи как можно меньшего количества кода. Можно соревноваться с другими игроками.

Заключение

Я надеюсь, что, независимо от вашего уровня знаний, эти игры вас развлекут, а также помогут приобрести (или освежить в памяти) некоторые навыки работы с CSS. Если знаете и другие подобные игры — дополняйте в комментариях!

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here