CSS Grid & Flexbox — это ключевые технологии современного веб‑лейаута. В этом курсе вы погрузитесь в самые важные техники построения адаптивных интерфейсов, узнаете, как использовать Grid, Subgrid, Flexbox, медиа‑запросы и запросы контейнера в реальных проектах, и разберётесь, какой инструмент подходит под разные задачи вёрстки.
Чему вы научитесь
Курс охватывает как основы, так и продвинутые техники, позволяя уверенно применять их в работе над любым макетом.
Глубокое понимание Flexbox и Grid
Полный обзор всех ключевых свойств и особенностей Flexbox и Grid.
Разбор типичных кейсов использования каждого метода.
Сравнение поведения систем и объяснение, когда одна технология предпочтительнее другой.
Работа с адаптивными изображениями
Изучение различных подходов к оптимизации изображений под разные устройства.
Рекомендации по выбору техники в зависимости от контекста задачи.
Современные инструменты адаптивности
Медиа‑запросы: как эффективно использовать редко применяемые возможности.
Запросы контейнера: новые подходы к адаптивной вёрстке, независимые от ширины экрана.
Subgrid: продвинутая работа с CSS Grid
Понимание концепции Subgrid и её роли в создании сложных макетов.
Какие проблемы Subgrid решает и как применять её в практических интерфейсах.
Для кого этот курс
Курс идеально подходит для тех, кто только начинает изучать CSS, а также для разработчиков с опытом, которым не хватало системного понимания современных возможностей CSS‑лейаута.
Если вы хотите уверенно строить адаптивные интерфейсы и владеть современными инструментами вёрстки — этот курс станет надёжным фундаментом.
Удален по просьбе правообладателя
Урок 1.00:10:49
Introduction
Урок 2.00:03:43
Grid Overview
Урок 3.00:11:03
Your First Grid
Урок 4.00:05:11
Inspecting Grid with Dev Tools
Урок 5.00:12:43
Basic Grid Exercise
Урок 6.00:03:16
Grid Layout Exercise
Урок 7.00:05:45
Grid Span & Repeat
Урок 8.00:02:08
Grid Span & Repeat Exercise
Урок 9.00:04:35
Grid Template Area
Урок 10.00:03:12
Grid Template Area Exercise
Урок 11.00:05:30
Responsive Design & Media Queries
Урок 12.00:09:05
Media Queries with Grid Layouts
Урок 13.00:04:33
Media Queries with Grid Exercise
Урок 14.00:15:05
Mobile-First Layouts with Grid
Урок 15.00:04:16
Featured Card Styles
Урок 16.00:13:06
Two Column Card Layout
Урок 17.00:02:48
Three Column Card Layout Exercise
Урок 18.00:11:55
Desktop Layout Exercise
Урок 19.00:08:31
Overlapping Rows & Columns
Урок 20.00:09:55
Overlapping Grid Layout
Урок 21.00:03:28
CSS Animated Grid Exercise
Урок 22.00:07:11
Grid Margin
Урок 23.00:09:27
minmax, auto-fit, & auto-fill
Урок 24.00:14:39
Subgrid
Урок 25.00:09:26
Subgrid in Action
Урок 26.00:14:43
Moons of Saturn: Mobile Layout
Урок 27.00:11:16
Moons of Saturn: Adding a Media Query
Урок 28.00:15:54
Moons of Saturn: Medium Width
Урок 29.00:06:15
Moons of Saturn: Desktop
Урок 30.00:04:50
Where to use Flexbox
Урок 31.00:06:04
flex-direction & flex-wrap
Урок 32.00:13:15
justify-content & align-items
Урок 33.00:19:21
Navbar with Flexbox
Урок 34.00:04:45
Responsive Navbar on Desktop
Урок 35.00:05:39
Flexbox Layout Exercise: Medium Screens
Урок 36.00:05:24
Flexbox Layout Exercise: Large Screens
Урок 37.00:09:57
Responsive Images Overview
Урок 38.00:09:47
srcset & sizes Attributes
Урок 39.00:09:08
Picture Element
Урок 40.00:05:52
Container Queries
Урок 41.00:21:42
Container Size Queries
Урок 42.00:03:36
Featured Card Exercise
Урок 43.00:12:33
Card Page Layout
Урок 44.00:09:34
Changing Themes with Style Queries
Урок 45.00:00:56
Wrapping Up
Авторы - Jen Kramer, master.dev (ex FrontendMasters)
Джен Крамер преподает HTML и CSS для всех уровней более 20 лет. Ранее она была лектором в Гарвардском университете, совмещая это с работой фрилансера по веб-дизайну. Джен также является автором более 70 видео-курсов и трех книг. В настоящее время она занимает должность директора по дизайну обучения и технологиям в AnnieCannons - некоммерческой организации, которая обучает, подготавливает и помогает людям, пострадавшим от торговли людьми, начать у
Master.dev — это образовательная платформа для разработчиков, которая помогает совершенствовать инженерные навыки: от изучения языков программирования и веб-разработки до работы с базами данных, облачной инфраструктурой, DevOps и искусственным интеллектом. Ранее известная как Frontend Masters, платформа расширила фокус и теперь обучает разработчиков всему спектру современной разработки ПО.
https://codepen.io/jen4web/pen/wvZMYwv