HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность
Подробнее
Что нужно для старта
- Этот курс является частью полного курса по HTML и CSS. Для комфортного обучения рекомендуется уверенно владеть основами HTML и CSS: понимать структуру HTML-документа, уметь работать с CSS-селекторами, блочной моделью, Flexbox и базовой версткой.
- Если вы еще не проходили предыдущие части курса, рекомендуем начать с курса «HTML и CSS (Часть 1) Первый сайт с нуля». Он поможет освоить все необходимые основы и подготовиться к изучению более сложных тем.
Что вы получите
- 🧩 Создавать сложные макеты с помощью CSS Grid.
- 📐 Выбирать между Flexbox и Grid для разных задач.
- 📍 Использовать все виды позиционирования элементов.
- 📱 Верстать полностью адаптивные сайты по принципу Mobile First.
- 🎯 Применять медиазапросы и контейнерные запросы.
- 🖼️ Работать с адаптивными изображениями и современными CSS-функциями.
- 🚀 Создавать сайты, которые одинаково хорошо выглядят на любых устройствах.
Для кого этот курс
- Этот курс предназначен для тех, кто уже знаком с основами HTML и CSS и хочет научиться создавать современные адаптивные сайты 🌐. Он подойдет начинающим frontend-разработчикам, студентам профильных курсов, а также всем, кто уже умеет верстать простые страницы, но хочет перейти на профессиональный уровень. Вы научитесь использовать CSS Grid, грамотно работать с позиционированием элементов и создавать интерфейсы, которые одинаково хорошо выглядят на любых устройствах 📱. Если вы планируете заниматься frontend-разработкой или хотите уверенно верстать современные сайты, этот курс станет важным шагом на пути к этой цели. ✨
Программа курса
- Grid-контейнер: grid-template-columns, grid-template-rows, gap
- Единицы fr, функции repeat(), minmax()
- Размещение элементов: grid-column, grid-row, grid-area
- Именованные области шаблона (grid-template-areas)
- Вложенные сетки и subgrid; Flexbox vs Grid — когда что выбирать
- Поток документа и свойство position: static, relative
- Вне потока: absolute и fixed, смещения top/right/bottom/left
- «Прилипающие» элементы: sticky-шапки и панели
- Слои и наложение: z-index и контекст наложения
- Мобильные устройства и meta viewport, подход mobile-first
- Медиазапросы @media, контрольные точки (breakpoints)
- Контейнерные запросы @container — адаптив по размеру родителя
- Гибкие размеры: %, vw/vh, clamp(), min(), max()
- Адаптивные изображения: object-fit, aspect-ratio, авто-сетки
- Подведем итоги
01CSS Grid — двумерные макеты
- Grid-контейнер: grid-template-columns, grid-template-rows, gap
- Единицы fr, функции repeat(), minmax()
- Размещение элементов: grid-column, grid-row, grid-area
- Именованные области шаблона (grid-template-areas)
- Вложенные сетки и subgrid; Flexbox vs Grid — когда что выбирать
02Позиционирование
- Поток документа и свойство position: static, relative
- Вне потока: absolute и fixed, смещения top/right/bottom/left
- «Прилипающие» элементы: sticky-шапки и панели
- Слои и наложение: z-index и контекст наложения
03Адаптивная вёрстка
- Мобильные устройства и meta viewport, подход mobile-first
- Медиазапросы @media, контрольные точки (breakpoints)
- Контейнерные запросы @container — адаптив по размеру родителя
- Гибкие размеры: %, vw/vh, clamp(), min(), max()
- Адаптивные изображения: object-fit, aspect-ratio, авто-сетки
- Подведем итоги
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 14 сентября 2026 г.

Stepik 

















