CSSWEB

CSS Game: 8 игр для увлекательного изучения CSS

CSS Game: 8 игр для увлекательного изучения CSS

Должен признаться, мне сложно что-то запоминать. Особенно, если речь идет о CSS. Например, макет Flexbox. Свойство justify-contentгибкого контейнера может иметь более 12 различных значений, многие из которых можно комбинировать с ключевыми словами safe или unsafe. Чтобы прочитать полное руководство по flexbox по трюкам CSS, вам нужно прокрутить страницу с двумя столбцами высотой более 20 тыс. Пикселей – и хотя заголовок подразумевает это, они не охватывают все.

Я недавно наткнулся на игру в жанре Tower Defense, в которой учат flexbox, что на самом деле …
Погодите, а что?
Да, оказалось, что существует довольно много игр, помогающих обучать CSS. Я собрал несколько бесплатных игр с CSS, которые были мне полезны и, возможно, помогут вам снова развлечься с CSS!

1. Защита Flexbox


CSS Game: 8 игр для увлекательного изучения CSS - DEV

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

2. Flexbox Froggy


CSS Game: 8 игр для увлекательного изучения CSS - DEV

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

3. Садовая сетка


CSS Game: 8 игр для увлекательного изучения CSS - DEV

На 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.

4. CSS Diner


CSS Game: 8 игр для увлекательного изучения CSS - DEV

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

5. Unfold


CSS Game: 8 игр для увлекательного изучения CSS - DEV

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

6. Дорожная карта


CSS Game: 8 игр для увлекательного изучения CSS - DEV

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

7. Карнавал


CSS Game: 8 игр для увлекательного изучения CSS - DEV

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

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


CSS Game: 8 игр для увлекательного изучения CSS - DEV

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

Бонус

А вот и бонусная часть с рекомендациями из комментариев:

9. Зомби Flexbox


CSS Game: 8 игр для увлекательного изучения CSS - DEV

Это обучающий курс, основанный на сюжетной линии, где вы научитесь использовать Flexbox и арбалет для охоты на зомби. Требуется регистрация.

10. Сервисные работники (Service Workies)


CSS Game: 8 игр для увлекательного изучения CSS - DEV

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

11. Grid Critters


CSS Game: 8 игр для увлекательного изучения CSS - DEV

Ваш путь к освоению CSS Grid начинается на загадочной планете Гридерос. Ваша миссия – использовать мощный инструмент сетки вашего корабля, чтобы спасти инопланетных существ от вымирания. Требуется регистрация.

Подведение итогов

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

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


Первоначально опубликовано: 24 октября 2019 г. на Medium

Источник записи: https://dev.to

Похожие сообщения
WEBWordPress

Как добиться максимального эффекта от линкбилдинга за 4 шага

WEB

DNS для веб-разработчиков

WEBWordPressWordPress - Админка

Используйте MailGun для пересылки электронной почты на вашем домене в Gmail

CSSWEB

Анимация линий и замкнутых контуров SVG на чистом CSS (для WordPress и не только)