Адаптивный веб‑дизайн сегодня — это не просто навык, а обязательное требование для любого, кто создает современные сайты. Flexbox и CSS Grid дают мощные инструменты для построения гибких, удобных и масштабируемых макетов. В этом курсе вы шаг за шагом освоите принципы работы с ними и научитесь создавать профессиональные адаптивные интерфейсы.
Что вы изучите в этом курсе
Курс охватывает ключевые аспекты адаптивной верстки и научит применять Flexbox, Grid и дополнительные техники на практике.
Глубокое понимание Flexbox
Вы разберетесь в основных и продвинутых свойствах Flexbox, научитесь быстро выравнивать элементы, распределять пространство и строить универсальные одномерные макеты.
Основные темы по Flexbox
Ось контейнера и направление потока
Гибкое распределение пространства
Выравнивание элементов по вертикали и горизонтали
Построение адаптивных панелей и карточек
Освоение CSS Grid для сложных макетов
CSS Grid помогает создавать многомерные, структурированные макеты, которые легко масштабировать и адаптировать под любой экран.
Основные темы по Grid
Создание сеток с фиксированными и гибкими треками
Grid Template Areas и структурирование страниц
Адаптивные сетки без медиа‑запросов
Комбинирование Grid и Flexbox
Работа с изображениями в адаптивной среде
Вы изучите различные стратегии оптимизации и масштабирования изображений, а также узнаете, когда использовать каждую из них.
Стратегии гибкого управления изображениями
Использование относительных единиц измерения
Техники контроля пропорций
Выбор корректного формата и размеров изображения
Float и их очистка
Даже при наличии современных технологий float остаются частью CSS. Курс поможет понять, где они применимы, и как правильно работать с ними без хаотичных «хакающих» решений.
Практика очистки float
Использование свойства clear
Метод clearfix
Лучшие сценарии применения float в текущих реалиях
Применение знаний в реальных проектах
К концу курса вы сможете собирать полноценные макеты веб‑страниц, грамотно совмещая Flexbox, Grid, адаптивные изображения и семантическую HTML‑структуру.
Что вы создадите
Адаптивные карточки и панели
Гибкие сетки для контента
Полноценную страницу со сбалансированным макетом
Комбинированные макеты, использующие несколько технологий
Удалён
Удален по просьбе правообладателя
Видео и материалы этого курса больше недоступны для просмотра.
Джен Крамер преподает HTML и CSS для всех уровней более 20 лет. Ранее она была лектором в Гарвардском университете, совмещая это с работой фрилансера по веб-дизайну. Джен также является автором более 70 видео-курсов и трех книг. В настоящее время она занимает должность директора по дизайну обучения и технологиям в AnnieCannons - некоммерческой организации, которая обучает, подготавливает и помогает людям, пострадавшим от торговли людьми, начать у
Master.dev — это образовательная платформа для разработчиков, которая помогает совершенствовать инженерные навыки: от изучения языков программирования и веб-разработки до работы с базами данных, облачной инфраструктурой, DevOps и искусственным интеллектом. Ранее известная как Frontend Masters, платформа расширила фокус и теперь обучает разработчиков всему спектру современной разработки ПО.