Резюме
- Flexbox Froggy обучает макету Flexbox с помощью интерактивных заданий с милыми лягушками.
- Flexbox Zombies предлагает увлекательный способ изучения Flexbox с заданиями и советами на тему зомби.
- CSSBattle предлагает пользователям воссоздать фигуры с помощью CSS, демонстрируя мощь и креативность CSS.
Узнайте все о современных макетах CSS и отточите свои основные навыки CSS с помощью этих интерактивных игр. С такими методами макетирования, как CSS-сетка, испытанием на скоростное прохождение и фундаментальным селекторным тестом, есть что-то для всех способностей.
1 Flexbox Froggy
Flexbox Froggy, обучающая дизайнеров гибкой компоновке блоков уже почти десятилетие, является, пожалуй, самой известной игрой CSS. И на то есть веская причина. Flexbox — это не только одна из самых сложных концепций CSS для освоения, но и этот игровой урок выигрывает по простоте использования и привлекательности.
В серии из 24 испытаний каждый уровень отображает горстку лягушек и соответствующие им кувшинки, которые они называют домом. Ваша задача — переместить каждую амфибию, используя только силу CSS flex. Вы можете свободно редактировать CSS в текстовом поле и сразу видеть, как различные свойства влияют на положение лягушек. Нет штрафа за ошибку, поэтому вы можете экспериментировать, настраивать свой CSS и наблюдать за результатами.
Все начинается просто с простого свойства justify-content, перемещающего лягушку из одного угла в другой. Но сложность возрастает, когда вы переходите к разным направлениям, обертыванию и нескольким различным наборам лягушек. На каждом уровне есть краткий текст справки, который связывает имена свойств с кратким описанием и возможными значениями.
Flexbox Froggy идеально подходит как начинающим, так и более продвинутым дизайнерам, желающим освежить свои знания Flexbox.
2 Flexbox зомби
Если помощь лягушкам звучит слишком мило, вы, возможно, предпочтете вместо этого разобраться с ордами зомби, пожирающих мозги. Flexbox Zombies повышает ценность производства с помощью анимации, музыки и диалогов. Но его подход похож на Flexbox Froggy: введите CSS в текстовое поле, чтобы продолжить.
Игра представлена серией уровней, сгруппированных в главы, которые заблокированы, чтобы вы не могли перейти вперед. Ваш CSS управляет арбалетом, а позже и другим оружием, чтобы уничтожать зомби в различных позициях на экране.
С 12 главами, каждая из которых содержит около 20 шагов, которые объединяют руководства и задачи, здесь есть много ценности. Этим задачам не хватает быстрых советов, которые предлагает Flexbox Froggy, но кнопка Hint дает советы, основанные на том, что вы уже пробовали, что является полезным дополнением.
3 Защита Flexbox
Flexbox Defense, следуя примеру жанра tower defense, имеет схожую с Flexbox Froggy планировку и ощущение. На этот раз, вместо того, чтобы помогать милым лягушкам, ваша задача — размещать башни так, чтобы они уничтожали приближающихся врагов, движущихся по пути.
В этой игре цель каждого уровня немного менее ясна, поэтому акцент немного больше на игре и стратегии. Вам не только нужно будет применить свои навыки CSS, вам также нужно будет решить, где именно разместить свои башни, чтобы уничтожить нападающих.
Задача остается простой, но дополнительный элемент поощряет эксперименты, поэтому вы можете найти ее более эффективной, с большим охватом свойств Flexbox. Подсказки, опять же, предлагаются с помощью простых всплывающих окон, а небольшой набор из 12 уровней делает ее идеальным вариантом для быстрого сеанса обучения.
4 Flex Box Приключения
Flex Box Adventure — это еще одна вариация на знакомую тему, но она включает множество объяснений и несколько приятных функций для повышения качества жизни. Ведите своих героев, чтобы победить множество врагов и завоевать CSS Flexbox!
Игра имеет три уровня сложности, которые влияют на объем помощи, которую она предоставляет. На самом легком уровне опыт почти как аннотированный учебник CSS, но аннотации представляют собой увлекательные головоломки, которые идеально подобраны для демонстрации каждой концепции.
Каждый уровень открывается, когда вы проходите предыдущий, даже на самых легких настройках, поэтому ваш прогресс направляется и линеен. Моя единственная небольшая претензия заключается в том, что уровни открываются только в пределах их настройки сложности, поэтому стоит бросить себе вызов и начать с более высокой сложности.
5 Сетчатый сад
От создателя Flexbox Froggy, Grid Garden использует похожий подход к макету CSS Grid. На этот раз вам предстоит поливать морковь и травить сорняки, но принцип и интерфейс вам знакомы.
CSS Grid широко использует свойства сокращений, так что «3 / span 3» и «3 / 6» эквивалентны. Grid Garden обучает вас нескольким из этих сокращений, но он позволяет вам использовать любой CSS, который приводит к правильному решению, поэтому часто доступны несколько подходов.
Как и Flexbox Froggy, это короткий набор тестов, которые вы можете пройти довольно быстро, если вы уже являетесь экспертом CSS. Но они предлагают хорошее покрытие основ сетки и завершаются удовлетворительно сложной задачей.
6 Атака на сетку
Создатели Flex Box Adventure также создали сеточный эквивалент своей игры Flexbox, Grid Attack. Он работает точно так же, с тремя уровнями сложности, множеством вспомогательных подсказок и направляемым прогрессом. Однако вместо 24 уровней в этой игре целых 80, что отражает более сложную природу сетки CSS.
Grid Attack бросает вас в довольно глубокую пропасть; может быть сложно понять, что именно первый уровень хочет, чтобы вы сделали. Но как только вы освоитесь со стилем диаграмм, большое количество уровней делает кривую обучения довольно плавной.
Одна действительно приятная функция — инспектор, который рисует сетку, чтобы помочь вам сориентироваться. Это немного похоже на сетку, которую могут предложить инструменты разработчика вашего браузера, но она специально адаптирована для каждой задачи. Инспектор может быть небольшим спойлером, поэтому обязательно скройте его, если вы ищете настоящую задачу.
7 Анхореум
Как только вы освоите Flex и Grid, пришло время изучить некоторые другие аспекты CSS. Anchoreum от создателя Flexbox Froggy и Grid Garden занимается позиционированием якорей CSS.
Позиционирование якоря — это новая схема, которая позволяет вам позиционировать элемент относительно другого. Фактически, она настолько новая, что не все браузеры ее поддерживают; если вы используете Firefox или Safari, эта игра может не работать для вас.
Anchoreum длиннее предыдущих двух игр серии, в ней всего 40 испытаний. Признаюсь, я даже не знал о позиционировании якорей, когда обнаружил этот сайт. Но, опять же, игра отлично справляется с объединением объяснений, подсказок и головоломок для обучения основам.
8 CSS-закусочная
CSS — это больше, чем просто макет, и игры могут научить вас и более фундаментальному синтаксису. Селекторы — важная, но сложная часть CSS, и набор из 32 задач CSS Diner — отличный способ отточить свои навыки.
Каждый уровень имеет очень простое требование: введите селектор, который соответствует заданным элементам. Это варьируется от выбора всех элементов с одинаковым именем тега до выбора каждого второго элемента в списке, начиная с третьего.
Большинство из этих задач легкие, поэтому эксперты могут попытаться выполнить их на скорости. Но некоторые нюансы селекторов типов или сопоставления шаблонов атрибутов могут поставить в тупик даже мастеров CSS, так что не будьте слишком самодовольны!
9 CSS Speedrun
Говоря о скоростных прохождениях, вот реальный пример. CSS Speedrun — это, пожалуй, самая базовая рекомендация в списке, но это короткий и веселый способ бросить себе вызов.
Каждый из десяти уровней представляет собой HTML и предлагает вам написать селектор для идентификации выделенных элементов. Это может показаться очень похожим на CSS Diner, но у CSS Speedrun есть несколько интересных отличий.
Во-первых, таймер добавляет давления, подсчитывая количество секунд, необходимых для выполнения каждой задачи. И эти задачи находятся на немного более сложном уровне. Например, вам нужно будет запомнить, как структурировать сложный селектор nth-child всего на втором уровне.
К счастью, на каждом уровне есть две формы подсказок. Первая — простое всплывающее окно на странице, а вторая — прямая ссылка на соответствующую документацию MDN. Сайт также признает, что может быть больше одного решения, показывая ожидаемый «выбор разработчиков» при завершении каждого испытания.
Ознакомьтесь с уровнем 6, где представлен особенно хороший пример множественных решений.
10 CSSБитва
Это не для слабонервных! В отличие от других представленных здесь игр, CSSBattle имеет регулярные ежедневные задания. Каждое из них требует от вас воссоздать определенную форму или узор, используя только CSS.
Многие из игр здесь либеральны в решениях, которые они принимают, но CSS Battle делает шаг вперед. Вы можете редактировать разметку и CSS любым удобным для вас способом; единственное, что имеет значение, — это конечный результат.
CSS Battle наглядно демонстрирует, насколько мощными могут быть таблицы стилей. Вы можете не верить, что некоторые из запрошенных форм вообще могут быть созданы, но с упорством, экспериментированием и большим знанием CSS они достижимы.
Игра бесплатна, хотя вам нужно будет зарегистрироваться, чтобы отправить свой счет, и оплатить подписку для полного доступа к прошлым испытаниям. Подсчет очков немного непредсказуем (как именно вы измеряете сходство между двумя изображениями?), но такие функции, как визуальное различие и сравнение слайдов, помогут вам в ваших усилиях.
Свойство border-radius часто оказывается полезным, когда вы пытаетесь создать круги и другие кривые линии. Убедитесь, что вы удалили комментарии, прежде чем отправлять свою оценку!
