Курс на Stepik
Обложка курса «HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность» на Stepik
Бесплатно

HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность 0.000

Открыть на
STEPIK.ORG

Научитесь создавать современные адаптивные сайты с помощью CSS Grid, медиазапросов и контейнерных запросов 📱. Освойте профессиональные техники позиционирования элементов и верстайте интерфейсы, которые отлично выглядят на любых устройствах. ✨

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность»Учеников на курсе 3
Сертификаты, выданные на курсе «HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность»Сертификатов выдано 0
Отзывы о курсе «HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность»Отзывов получено 0
Рейтинг курса «HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность»Рейтинг курса 0.000
Уроки в курсе «HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность»Количество уроков 15
Тесты в курсе «HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность»Количество квизов 99
Обновления курса «HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность»Обновления курса
Дата публикации курса «HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность»Дата публикации курса
Последнее обновление курса «HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность»Последнее обновление
Сложность easy

Содержание курса

Разделы в курсе «HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность» 3 раздела Уроки в курсе «HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность» 15 уроков Тесты в курсе «HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность» 99 тестов Последнее обновление курса «HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность» обн. 9 сентября 2026

CSS Grid — двумерные макеты

5 уроков
1. Grid-контейнер: grid-template-columns, grid-template-rows, gap
2. Единицы fr, функции repeat(), minmax()
3. Размещение элементов: grid-column, grid-row, grid-area
4. Именованные области шаблона (grid-template-areas)
5. Вложенные сетки и subgrid; Flexbox vs Grid — когда что выбирать

Позиционирование

4 урока
1. Поток документа и свойство position: static, relative
2. Вне потока: absolute и fixed, смещения top/right/bottom/left
3. «Прилипающие» элементы: sticky-шапки и панели
4. Слои и наложение: z-index и контекст наложения

Адаптивная вёрстка

6 уроков
1. Мобильные устройства и meta viewport, подход mobile-first
2. Медиазапросы @media, контрольные точки (breakpoints)
3. Контейнерные запросы @container — адаптив по размеру родителя
4. Гибкие размеры: %, vw/vh, clamp(), min(), max()
5. Адаптивные изображения: object-fit, aspect-ratio, авто-сетки
6. Подведем итоги