Мы используем cookie для стабильной работы сервиса. Подробнее

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

ФорматОнлайн
Длительность12 часов
Объём3 занятий
О курсе

Подробнее

Современный сайт должен одинаково хорошо выглядеть на смартфоне, планшете и большом мониторе. Именно поэтому знание CSS Grid, адаптивной верстки и современных возможностей CSS сегодня является обязательным навыком для любого frontend-разработчика. 🚀 В этом курсе вы научитесь создавать сложные двумерные макеты с помощью CSS Grid, правильно использовать различные виды позиционирования элементов и разрабатывать сайты, которые автоматически подстраиваются под любые размеры экрана. Вы также познакомитесь с современными инструментами адаптивной верстки: медиазапросами, контейнерными запросами, гибкими единицами измерения, функциями clamp(), min() и max(), а также научитесь работать с адаптивными изображениями. Курс построен по принципу «от простого к сложному». Каждый урок включает подробную видео-лекцию, текстовый конспект и тесты с автоматической проверкой знаний. Практические задания помогут сразу закрепить новые темы и научиться применять их в реальных проектах. 💻 После успешного прохождения курса вы сможете уверенно верстать современные адаптивные интерфейсы, понимать, когда использовать Flexbox, а когда CSS Grid, и создавать страницы, которые корректно работают на любых устройствах. Эти навыки являются важной частью профессиональной frontend-разработки и станут отличной основой для дальнейшего изучения JavaScript и современных фреймворков. ✨
Требования

Что нужно для старта

  • Этот курс является частью полного курса по HTML и CSS. Для комфортного обучения рекомендуется уверенно владеть основами HTML и CSS: понимать структуру HTML-документа, уметь работать с CSS-селекторами, блочной моделью, Flexbox и базовой версткой.
  • Если вы еще не проходили предыдущие части курса, рекомендуем начать с курса «HTML и CSS (Часть 1) Первый сайт с нуля». Он поможет освоить все необходимые основы и подготовиться к изучению более сложных тем.
Результат

Что вы получите

  • 🧩 Создавать сложные макеты с помощью CSS Grid.
  • 📐 Выбирать между Flexbox и Grid для разных задач.
  • 📍 Использовать все виды позиционирования элементов.
  • 📱 Верстать полностью адаптивные сайты по принципу Mobile First.
  • 🎯 Применять медиазапросы и контейнерные запросы.
  • 🖼️ Работать с адаптивными изображениями и современными CSS-функциями.
  • 🚀 Создавать сайты, которые одинаково хорошо выглядят на любых устройствах.
Аудитория

Для кого этот курс

  • Этот курс предназначен для тех, кто уже знаком с основами HTML и CSS и хочет научиться создавать современные адаптивные сайты 🌐. Он подойдет начинающим frontend-разработчикам, студентам профильных курсов, а также всем, кто уже умеет верстать простые страницы, но хочет перейти на профессиональный уровень. Вы научитесь использовать CSS Grid, грамотно работать с позиционированием элементов и создавать интерфейсы, которые одинаково хорошо выглядят на любых устройствах 📱. Если вы планируете заниматься frontend-разработкой или хотите уверенно верстать современные сайты, этот курс станет важным шагом на пути к этой цели. ✨
Содержание

Программа курса

3 занятия
ТемаЧто внутри
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, авто-сетки
- Подведем итоги

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, авто-сетки
- Подведем итоги

Организатор

Автор курса

StepikStepik
Stepik — образовательная платформа и конструктор онлайн-курсов. Мы разрабатываем алгоритмы адаптивного обучения, сотрудничаем с авторами MOOC, помогаем в проведении олимпиад и программ переподготовки. Наша цель — сделать образование открытым и удобным. Stepik — широко известная российская образовательная платформа, основанная в 2013 году. На Stepik зарегистрировано более миллиона пользователей из России и стран СНГ. В настоящее время на Stepik представлены несколько тысяч учебных курсов на самые разные темы.
Подробнее об авторе
Мнения учеников

Отзывы о курсе

Оставьте отзыв

Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.

Напишите ваш коментарий, не менее 30 символов

Нажимая кнопку, вы даете согласие на обработку персональных данных

Оставьте заявку

Консультант ответит на вопросы о курсе «HTML и CSS (Часть 3) Сетки, позиционирование и адаптивность» и поможет разобраться в деталях обучения.

Комментарий ...

Нажимая кнопку, вы даете согласие на обработку персональных данных

Информация обновлена 14 сентября 2026 г.

Продолжить выбор

Похожие курсы

Vue.js 3, Vue Router и Pinia
Vue.js 3, Vue Router и Pinia

В этом курсе мы изучим Vue, Vue Router и Pinia, создавая два полноценных приложения. Мы сделаем приложение для отображения прогноза погоды и Saas сервис хранения веб закладок. Это…

Онлайн15 занятий
3 999 ₽
Node js для Front End
4 месяца
Node js для Front End

Backend разработка на Node.js: Express.js, NestJS фреймворки. Работа с базами данных PostgreSQL, MongoDB. Создание REST API, аутентификация и авторизация. WebSockets для реального…

ОнлайнСредний
100 000 ₽от 5 555 ₽/мес на 18 мес.
Вёрстка на HTML & CSS для начинающих
30 минут в день
Вёрстка на HTML & CSS для начинающих

В этом курсе вы научитесь с нуля основам HTML и CSS, которые нужны для создания сайтов и уже сможете выполнять довольно серьезные работы в этой области. Мы будем изучать язык гипе…

Онлайн8 занятий
490 ₽
React Native и Expo Router
React Native и Expo Router

В этом курсе мы изучим React Native и Expo Router написав полноценное мобильное приложение с авторизацией и нативными возможностями. Этот курс подойдёт тем, кто хочет погрузиться…

Онлайн16 занятий
3 999 ₽
Frontend Vue разработка
Frontend Vue разработка

Vue входит в топ-3 GitHub: 200к репозиториев, 42к звёзд, 4 млн npm-загрузок. Шаблоны близки к HTML, реактивность без хуков, v-for и @click справятся с любым CRUD. По State of JS 2…

Онлайн1 занятий
25 000 ₽
Курс "Frontend-разработчик"  с оплатой большей части курса после трудоустройства
24 октября 2024 г.
Курс "Frontend-разработчик" с оплатой большей части курса после трудоустройства

Курс Frontend-разработчика. Длительность от 9 месяцев. Гарантия трудоустройства. Минимальная зарплата от 100 000 рублей.

Онлайн6 занятий
Помощь с трудоустройствомПерсональный наставник+2
139 000 ₽
Начать без затрат

Бесплатные курсы