Краткое содержание
Овладейте основами современных CSS-макетов и улучшите свои навыки, играя в эти интерактивные игры. Вы познакомитесь с такими приемами, как CSS Grid, соревнования на скорость и тесты на базовые селекторы — здесь найдется что-то интересное для каждого уровня подготовки.
1. Флексбокс Лягушка
Флексбокс Лягушка, обучающая дизайнеров адаптивному флексбоксу, стала, вероятно, самой популярной CSS-игрой. И это неудивительно: флексбокс — одна из наиболее сложных концепций CSS, но этот игровой урок очень продуман и прост в использовании.
В серии из 24 заданий вы встретите множество лягушек и кувшинок, к которым нужно их переместить, используя только свойства CSS flex. Вы можете редактировать CSS в текстовом окне и сразу видеть, как разные свойства воздействуют на положение лягушек. Никаких штрафов за ошибки — вы можете смело экспериментировать, вносить изменения и наблюдать за результатом.
Каждое задание начинается с простых задач, например, перемещения лягушки из одного угла в другой с помощью свойства justify-content. Однако с каждым уровнем сложность возрастает — добавляются новые направления, оборачивания и разные наборы лягушек. Каждый уровень сопровождается краткими подсказками, которые связывают названия свойств с их описаниями и возможными значениями.
Флексбокс Лягушка станет отличным выбором как для новичков, так и для более опытных дизайнеров, желающих освежить свои знания о флексбоксе.
2. Флексбокс Зомби
Если помогать лягушкам — это слишком мило, вы можете предпочтете сразиться с зомби. Флексбокс Зомби предлагает более высокую качество исполнения с анимацией, музыкой и захватывающим сюжетом. Но суть остается такой же, как и у Флексбокс Лягушки: вводите CSS в текстовое поле, чтобы двигаться дальше.
Игра разбита на уровни, сгруппированные по главам, которые заблокированы для предотвращения перепрыгивания. Ваш CSS управляет арбалетом — а позже и другими орудиями — для уничтожения зомби, которые появляются в разных точках на экране.
С 12 главами, каждая из которых включает около 20 шагов, вы получите массу полезного контента. Здесь нет быстрых подсказок, как в Флексбокс Лягушке, но кнопка Советы предлагает рекомендации на основе ваших предыдущих попыток, что является отличным дополнением.
3. Флексбокс Защита
Следуя в жанре защитных башен, Флексбокс Защита предлагает похожий макет и атмосферу, как у Флексбокс Лягушки. Ваша задача — расставить башни так, чтобы они эффективно уничтожали врагов, движущихся по дороге.
В этой игре задача каждого уровня менее очевидна, поэтому акцент сделан больше на игровом процессе и стратегии. Вам предстоит применить свои навыки CSS и подумать, где именно разместить башни, чтобы уничтожить наступающих врагов.
Предпочитаю Играть В Эти Игры На Складном Телефоне
Эти игры лучше всего подходят для использования на складных устройствах.
Хотя задачи остаются простыми, дополнительный элемент побуждает к экспериментам, так что вы можете обнаружить, что это работает более эффективно с большим охватом свойств Flexbox. Подсказки снова доступны через простые всплывающие сообщения, а небольшой набор из 12 уровней делает это идеальным способом для быстрого обучения.
4. Приключение Флекс Бокса
Приключение Флекс Бокса — это другая интерпретация знакомой темы, но она содержит множество объяснений и отличных улучшений функциональности. Направляйте своих героев, чтобы победить различных врагов и освоить CSS Flexbox!
Игра включает три уровня сложности, которые влияют на количество помощи, предоставляемой игроку. На самом легком уровне опыт напоминает аннотированный урок по CSS с увлекательными головоломками, идеальными для демонстрации каждой концепции.
Каждый уровень открывается после завершения предыдущего, даже на самом легком уровне, так что ваш прогресс будет четко направленным и последовательным. Единственное замечание — уровни открываются только в рамках своего уровня сложности, поэтому стоит бросить себе вызов и попробовать более высокий уровень.
5. Сад Сеток
Создатель Флексбокс Лягушки, Сад Сеток, предлагает аналогичный подход к CSS Grid. На этот раз вам нужно поливать морковку и вырывать сорняки, но принцип и интерфейс останутся знакомыми.
CSS Grid активно использует сокращенные свойства, такие как "3 / span 3" и "3 / 6", которые являются эквивалентами. Сад Сеток учит вас нескольким из этих сокращений, но позволяет применять любой CSS, который приводит к правильному результату, что открывает возможности для различных подходов.
Как и Флексбокс Лягушка, это короткая серия тестов, которые можно пройти довольно быстро, если вы уже являетесь экспертом в CSS. Но они охватывают основы сеток и завершаются удовлетворяющей сложной задачей.
6. Атака Сетки
Разработчики Приключения Флекс Бокса также создали аналог сеточной игры, Атака Сетки. Она работает в том же духе: три уровня сложности, множество подсказок и четкий прогресс. Однако вместо 24 уровней, эта игра предлагает целых 80, что подразумевает более сложный характер CSS Grid.
Атака Сетки может немного запутать на начальном уровне; иногда сложно понять, что именно от вас требуется. Но после того, как вы привыкнете к стилю диаграмм, обилие уровней обеспечит мягкую кривую обучения.
Замечательной особенностью является инспектор, который визуализирует сетку с помощью наложения, чтобы помочь вам ориентироваться. Это похоже на возможность сеточного макета в инструментах разработчика вашего браузера, но специально адаптировано под каждое задание. Если вы хотите настоящего вызова, не забудьте скрыть инспектор, чтобы не упрощать задачу.
Что Делают Функциональные Кнопки В Chrome DevTools
Если вы используете Chrome DevTools, знание функциональных клавиш может значительно ускорить ваш рабочий процесс. Вот список их функций.
7. Анкереум
Как только вы освоите Флекс и Grid, пора приступить к изучению других аспектов CSS. Создатель Флексбокс Лягушки и Сада Сеток, Анкереум, посвящен позиционированию якоря в CSS.
Позиционирование якоря — новая схема, позволяющая точечно располагать элементы относительно друг друга. На самом деле, это так ново, что не все браузеры поддерживают его; если вы используете Firefox или Safari, эта игра может не работать.
Анкереум длиннее, чем предыдущие игры в серии и включает 40 заданий. Я, признаюсь, не знал о позиционировании якоря, когда наткнулся на этот сайт. Тем не менее, игра отлично сочетает объяснения, подсказки и головоломки, чтобы научить основам.
8. CSS Динер
CSS касается не только макета; игры могут помочь вам усвоить более фундаментальный синтаксис. Селекторы — важная и порой сложная часть CSS, а набор из 32 заданий CSS Динера — отличный способ отточить свои навыки.
Каждый уровень имеет простое требование: введите селектор, который соответствует заданным элементам. Это может варьироваться от выбора всех элементов с одинаковым именем тега до выбора каждого второго элемента в списке, начиная с третьего.
Большинство заданий достаточно просты, что может сподвигнуть экспертов пройти их на время. Однако некоторые тонкости стандартных селекторов или сопоставления атрибутов могут жёстко заковыристо касаться даже настоящих волшебников CSS, так что не теряйте бдительность!
9. CSS Спидран
Говоря о спидранах, вот настоящий. CSS Спидран — это, вероятно, самая простая рекомендация в списке, но это короткий и веселый способ проверить себя.
Каждый из десяти уровней представляет собой HTML и ставит перед вами задачу написать селектор, чтобы идентифицировать выделенные элементы. Это может показаться очень похоже на CSS Динер, но CSS Спидран предлагает несколько интересных отличий.
Во-первых, таймер добавляет элемент напряжения, подсчитывая количество секунд, необходимых для завершения каждой задачи. Кроме того, задания немного сложнее. Например, вам придется вспомнить, как построить сложный селектор nth-child уже на втором уровне.
К счастью, у каждого уровня есть два вида подсказок. Первый — это простой всплывающий совет на странице, второй — прямая ссылка на соответствующую документацию MDN. Сайт также подтверждает, что может быть несколько решений, показывая ожидаемый «выбор разработчика» при завершении каждой задачи.
Обратите внимание на уровень 6 как на особенно хороший пример нескольких решений.
10. CSS Битва
Эта игра не для слабонервных! В отличие от других игр, представленных здесь, CSS Битва предлагает регулярные, ежедневные задания. Каждое из них требует от вас воссоздать определенную форму или узор, используя только CSS.
Многие из представленных здесь игр подход к задачам достаточно свободен, однако CSS Битва идет дальше. Вы можете редактировать HTML и CSS любым удобным для вас образом; главное — это конечный результат.
CSS Битва демонстрирует, насколько мощными могут быть таблицы стилей. Вы можете не поверить, что некоторые запрашиваемые формы вообще можно создать, но при целеустремленности, экспериментировании и хорошем понимании CSS, они достижимы.
Игра бесплатная, хотя для того, чтобы представлять свои баллы, нужно зарегистрироваться и оплатить подписку для получения полного доступа к предыдущим заданиям. Оценка может быть немного непредсказуемой (как именно измеряется схожесть между двумя изображениями?), но такие функции, как визуальное различие и слайд-сравнение помогут вам в ваших усилиях.
Свойство border-radius часто оказывается полезным, когда вы пытаетесь создавать окружности и другие закругленные формы. Не забудьте удалить комментарии перед тем, как представить свой балл!
Если вам понравилась эта статья, подпишитесь, чтобы не пропустить еще много полезных статей!
Вы также можете найти наши материалы в:
- Telegram: https://t.me/gergenshin
- Youtube: https://www.youtube.com/@gergenshin
- Яндекс Дзен: https://dzen.ru/gergen
- Официальный сайт: https://www-genshin.ru