Быстрые Ссылки
Grid и Flex изменили мир веб-дизайна, позволяя удобно размещать контент без лишних сложностей, но их принципы могут быть непростыми для первого понимания. Если вы чувствуете себя запутанным, попробуйте эти замечательные уроки и практические задания для отработки навыков.
1 Флексбокс Лягушонок
Флексбокс Лягушонок, существующий почти десять лет, является одним из первых и самых популярных ресурсов для интерактивного изучения CSS. Эта онлайн-игра учит основам Flexbox — модуля компоновки с гибкими контейнерами CSS.
Ваша задача — помочь симпатичным лягушкам, которые потерялись вдали от своих кувшинок, правильно расположиться в сетке. Заполняя редактируемое текстовое поле, вам нужно использовать такие свойства, как justify-content и align-items.
Ваши действия будут определять, как лягушки расположатся в своем пруду и вернутся к своим кувшинкам, окрашенным в те же цвета, что и лягушки. По мере усложнения задач вам придется их переставлять.
Что такое "Адаптивный Дизайн" и как его использовать?
Адаптивный дизайн — это концепция создания веб-сайта, который будет выглядеть прекрасно на любых устройствах — как на компьютерах, так и на мобильных телефонах.
Игра не воспринимает себя слишком серьезно, что позволяет вам выбирать уровень в любое время. Каждый уровень имеет четкие задания, а игра предлагает подсказки, когда вы нажимаете на название конкретного свойства CSS. Есть даже режим для людей с нарушениями цветового восприятия, который добавляет узоры для различия лягушек.
Серия заканчивается масштабным тестом ваших знаний, что становится очень захватывающим испытанием.
После освоения Flexbox вы можете перейти к CSS Grid с продолжением — Grid Garden. Эта игра обучает основам двумерной верстки, предлагая поливать сад и избавляться от сорняков.
2 Узнать CSS Grid
Теперь о CSS Grid. Вот подробное руководство по этой более сложной технике верстки. Узнать CSS Grid — это самодостаточное одностраничное руководство, которое отлично выполняет роль визуального справочника и учебника для новичков.
Руководство постепенно вводит вас в основы и более сложные техники CSS Grid, разбирая каждое свойство по отдельности. Оно не интерактивное, но отличные примеры с лихвой компенсируют это, показывая, как каждое свойство и значение влияют на общую компоновку. Сопутствующие диаграммы просты, но эффективно иллюстрируют каждую концепцию.
Хотя финальные примеры более практичны, основной акцент сделан на понятном объяснении каждого свойства, его особенностей и поведения в сочетании с другими.
В результате получается более доступный справочник по сравнению с официальными спецификациями, которые могут показаться немного пугающими для новичков в CSS. Если вы хотите добавить Grid к своим навыкам CSS или продолжаете с одного из более практичных ресурсов, это отличное руководство, которое стоит сохранить в закладках.
3 Grid по Примерам
Этот сайт обещает "всё, что нужно для изучения CSS Grid Layout" и выполняет свое обещание, предлагая примеры конкретных свойств, наглядные примеры популярных дизайнерских паттернов и даже видеоуроки. Созданный Рейчел Эндрю, членом Рабочей Группы CSS W3, Grid по Примерам предлагает четкие демонстрации, начиная от небольших стилей компонентов и заканчивая макетами целых страниц.
Основные примеры включают встроенные Codepens, с которыми можно ознакомиться и поэкспериментировать, чтобы закрепить понимание. Они также ссылаются на соответствующую часть официальной спецификации, чтобы погрузиться в тему при необходимости.
Разнообразие подходов означает, что вы можете учиться так, как вам удобнее. Независимо от того, хотите ли вы изучать каждую деталь, или предпочитаете высокоуровневую концепцию, вы обнаружите, что Grid по Примерам полностью удовлетворит ваши запросы. Сайт предлагает множество дополнительных материалов, помимо основных руководств, включая ссылки на проекты Рейчел на GitHub, отслеживающие ошибки CSS и ответы на часто задаваемые вопросы.
4 Интерактивное Руководство по Flexbox
Это руководство включает отличные интерактивные примеры с вкладками и ползунками для настройки свойств. По мере изменения этих элементов сопутствующий CSS автоматически адаптируется, и вы видите изменения в реальном времени на примере компонента. Это делает обучение мгновенным и дает точное представление о том, что происходит в вашем браузере.
Интерактивное Руководство по Flexbox предлагает отличные диаграммы, которые разъясняют любые недоразумения, и использует забавную метафору барбекю для объяснения осей — часто трудного для понимания понятия.
Эта одностраничная статья заканчивается отличным практическим исследованием распространенной задачи: верстки формы входа. Используя Flexbox, она предлагает четыре разных макета в зависимости от доступного пространства, без применения media queries. Техника представлена тремя способами: интерактивным примером, кодпеном и объяснительным видео.
Автор продолжил с этим руководством, предсказуемо, Интерактивное Руководство по CSS Grid, которое так же успешно объясняет двумерную компоновку.
5 Руководство по Верстке CSS Grid
Рано или поздно вы столкнетесь с Руководством по Верстке CSS Grid от Кріса Хауса и его партнером — Руководством по Верстке Flexbox на CSS-Tricks. Этот сайт полон полезных статей и руководств, но эта пара представляет собой лучшее, что он предлагает, и, вероятно, это самые цитируемые ресурсы по CSS. Каждый раз, когда у меня возникает вопрос о Grid или Flexbox, я неизменно оказываюсь здесь.
Эти два руководства фактически стали стандартом для изучения CSS Grid и Flexbox. Они являются отличной справочной информацией с наглядными диаграммами и четкими объяснениями свойств, сгруппированными по их назначению. Они не обязательно для абсолютных новичков, но идеально подходят тем, кто переходит от старых методов верстки на основе float.
Каждое руководство представляет свойства в двух колонках: одна для тех, которые применимы к родительским контейнерам, а другая — для дочерних элементов. Это практический подход к изучаемому материалу, который помогает закрепить понимание того, как эти разные механизмы решают задачу расположения контента.
Хотя оба ресурса содержат множество разделов, включая заметки о терминологии, поддержке браузеров и ошибках, именно разделы свойств являются наиболее полезными. Сайт фактически открывает эти разделы по умолчанию, оставляя остальные свёрнутыми, что подчеркивает их важность.
7 Полезных Сайтов, Которые Должны Знать Начинающие Веб-разработчики
Планируете изучать веб-разработку? Эти семь сайтов должны стать в вашем списке необходимых ресурсов.
6 Что за Флексбокс?!
Что за Флексбокс?! — это старый видеокурс, который по-прежнему остается актуальным. Ведущий Уэс Бос, опытный веб-разработчик и преподаватель, охватывает всё — от flex-direction до желаемого макета "колонок равной высоты".
Уэс — увлекательный ведущий, который подробно объясняет каждую часть примеров кода в процессе, и серия подходит как для новичков, так и для тех, кто уже знаком с основами CSS. Если вам нравится учиться у опытного наставника в понятном и доступном темпе, этот обучающий курс — именно то, что вам нужно. Большинство видео имеют продолжительность 5-10 минут, так что они не углубляются слишком подробно, четко и лаконично освещая каждую тему.
Хотя видео размещены бесплатно на сайте Уэса, для полного доступа требуется ваш электронный адрес, но их также можно найти на его канале YouTube. Как и многие ресурсы здесь, у него есть соответствующее руководство по сетке.
Если вам понравилась эта статья, подпишитесь, чтобы не пропустить еще много полезных статей!
Вы также можете читать наши материалы в:
- Telegram: https://t.me/gergenshin
- Яндекс Дзен: https://dzen.ru/gergen
- Официальный сайт: https://www-genshin.ru
