CSS-сетки и Flexbox в адаптивном веб-дизайне

Этот курс поможет вам уверенно создавать адаптивные макеты с использованием современных CSS‑инструментов — Floats, Flexbox и CSS Grid. Материал подается последовательно: от устаревших, но всё ещё встречающихся подходов к полностью современным решениям для гибкой верстки.

Что вы изучите в этом курсе

Работа со старыми и новыми подходами к созданию сеток

Вы начнете с быстрого разбора сеток на float — подхода, который долгое время был стандартом отрасли. Узнаете, как они строятся, в чем их плюсы и минусы, и почему современные методы постепенно вытесняют их.

Медиа‑запросы и отзывчивые изображения

Курс познакомит вас с практиками создания адаптивных изображений, включая использование тега <picture> и полифила Picturefill, чтобы обеспечить гибкое масштабирование графики на разных устройствах.

Глубокое погружение в Flexbox

Вы узнаете, как работает Flexbox, чем он принципиально отличается от float-сеток и как с его помощью верстать компактные и удобные сеточные системы. Рассмотрите возможности выравнивания, расположения элементов и построения гибких макетов.

Решение практических задач с Flexbox

Инструктор покажет, как Flexbox помогает перекладывать элементы в строки и столбцы, даже если их количество заранее неизвестно. Этот навык особенно полезен при создании галерей, карточек товаров, медиа‑объектов и других динамических блоков.

Освоение CSS Grid — нового стандарта для двухмерных макетов

Основы синтаксиса Grid

Во второй части курса вы изучите базовые инструменты CSS Grid, включая построение макета картины Мондриана — отличный пример двухмерной сетки.

Продвинутые возможности CSS Grid

Вы научитесь работать с:

• альтернативными синтаксисами сеток;
• вложенными слоями;
• смещениями и гибкими областями;
• практическими вопросами совместимости между браузерами.

Совмещение Flexbox и Grid в реальных проектах

Понимая сильные и слабые стороны всех трех подходов — Float, Flexbox и CSS Grid — вы научитесь комбинировать их для создания действительно современных и масштабируемых макетов.

Ключевые навыки, которые вы получите

• Работа с Flexbox как современным одномерным инструментом компоновки.
• Использование Flexbox для создания полноценных макетов страниц, аналогичных Bootstrap 4, Foundation 6 и UIkit 3.
• Изучение CSS Grid — лучшего инструмента для двухмерной верстки.
• Решение проблем совместимости CSS Grid в разных браузерах.
• Применение медиа‑запросов, отзывчивых изображений и других техник адаптивного дизайна.
• Комбинирование Flexbox и Grid для создания современных интерфейсов.

Об инструкторе

Ваш инструктор — Джен Крамер. Более семнадцати лет она обучает клиентов, коллег и студентов тому, что значит создавать действительно качественные веб‑сайты. С 2000 года Джен разрабатывает сайты как самостоятельно, так и в составе агентств, помогая компаниям достигать своих бизнес‑целей.

Она преподает в Гарвардской школе магистратуры по цифровому медиа‑дизайну, ведет не менее пяти курсов в год, консультирует студентов и участвует в разработке учебных программ.

Кроме того, Джен доступна для частного обучения, корпоративных занятий и консультаций по веб‑дизайну.

Материалы курса на GitHub

Видео в формате .webm — работает в Google Chrome