Адаптивный веб‑дизайн сегодня — это не просто навык, а обязательное требование для любого, кто создает современные сайты. 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‑структуру.
Что вы создадите
Адаптивные карточки и панели
Гибкие сетки для контента
Полноценную страницу со сбалансированным макетом
Комбинированные макеты, использующие несколько технологий
Удален по просьбе правообладателя
Урок 1.00:06:43
Introduction
Урок 2.00:06:42
Responsive Design Overview
Урок 3.00:05:09
Flexbox
Урок 4.00:03:32
Starting CSS Setup
Урок 5.00:14:56
Container Flexbox Properties Demo
Урок 6.00:09:25
Child Flexbox Properties Demo
Урок 7.00:11:01
Overview & Setup
Урок 8.00:11:12
Coding a Flexbox Grid System
Урок 9.00:14:03
Responsive Media Queries
Урок 10.00:01:05
Flexbox Grid System Exercise
Урок 11.00:04:54
Flexbox Grid System Solution
Урок 12.00:10:38
Text Overlay Effect with Flexbox
Урок 13.00:04:53
Flexbox Exercises Setup
Урок 14.00:12:04
Collections Practice
Урок 15.00:08:52
Mission Practice
Урок 16.00:05:33
Flexbox Footer Practice
Урок 17.00:07:41
Header & Navbar
Урок 18.00:10:24
Header & Navbar Styling for Desktop
Урок 19.00:05:50
Header & Navbar Styling for Tablet
Урок 20.00:07:46
Header & Navbar Styling for Mobile
Урок 21.00:04:39
Responsive Images Overview
Урок 22.00:15:42
Responsive Images Best Practices
Урок 23.00:04:11
srcset & sizes Demo
Урок 24.00:10:46
Banner Demo
Урок 25.00:05:43
Hero Demo
Урок 26.00:02:19
Final Flexbox Exercise
Урок 27.00:04:02
Final Flexbox Solution
Урок 28.00:11:49
Introducing CSS Grid
Урок 29.00:10:47
Line-Based CSS Grid Layout Demo
Урок 30.00:03:00
Rows & Columns Practice
Урок 31.00:06:01
Sizing Rows & Columns
Урок 32.00:05:29
Grid Layout with Span Notation Demo
Урок 33.00:08:34
Grid System with CSS Grid
Урок 34.00:15:28
Responsive Grid with CSS Grid
Урок 35.00:09:44
Figure & Figure Caption with CSS Grid
Урок 36.00:05:25
Combining Grid Cells & Animation
Урок 37.00:03:07
Mosaic Grid Exercise
Урок 38.00:07:34
Mosaic Grid Solution
Урок 39.00:15:02
Magazine-Style Layouts with Grid Template Areas
Урок 40.00:09:23
Card HTML Markup Practice
Урок 41.00:16:24
Card Layouts with Flexbox & Grid
Урок 42.00:03:50
Final CSS Grid Exercise
Урок 43.00:05:56
Final CSS Grid Solution
Урок 44.00:02:31
Wrapping Up
Авторы - Jen Kramer, master.dev (ex FrontendMasters)
Джен Крамер преподает HTML и CSS для всех уровней более 20 лет. Ранее она была лектором в Гарвардском университете, совмещая это с работой фрилансера по веб-дизайну. Джен также является автором более 70 видео-курсов и трех книг. В настоящее время она занимает должность директора по дизайну обучения и технологиям в AnnieCannons - некоммерческой организации, которая обучает, подготавливает и помогает людям, пострадавшим от торговли людьми, начать у
Master.dev — это образовательная платформа для разработчиков, которая помогает совершенствовать инженерные навыки: от изучения языков программирования и веб-разработки до работы с базами данных, облачной инфраструктурой, DevOps и искусственным интеллектом. Ранее известная как Frontend Masters, платформа расширила фокус и теперь обучает разработчиков всему спектру современной разработки ПО.