Мы используем 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 ₽
ReactJS - Разработка WEB клиентских приложений, использование библиотек Redux и функций Hooks
24 ак.часа
ReactJS - Разработка WEB клиентских приложений, использование библиотек Redux и функций Hooks

На протяжении всего курса, слушатели вместе с тренером строят конкретные приложения с использованием классов React и функций. На основе теоретических знаний, на конкретных данных,…

Онлайн4 занятий
54 000 ₽
React Native и Expo Router
React Native и Expo Router

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

Онлайн16 занятий
3 999 ₽
Начать без затрат

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

Angular 14 - написание приложения
Бесплатно10 академических часов
Angular 14 - написание приложения

Обновленный быстрый курс по Angular 14, который будет актуален на момент 2022 года. В рамках курса напишем полноценное приложение, на примере которого разберем ключевые моменты да…

Онлайн1 занятий
Видеоуроки
Бесплатно
Практика Frontend разработчика 2025
Бесплатно48 академических часов
Практика Frontend разработчика 2025

Полный курс по созданию Frontend приложения с нуля. Это отличная практика для начинающих разработчиков, создание такого приложения даст вам отличный опыт владения HTML и CSS, ведь…

Онлайн1 занятий
Видеоуроки
Бесплатно