Stepik О курсе
Подробнее
Цель курса - научить вас продвинутым методикам и техниках вёрстки: адаптивной, резиновой с применением современных инструментов.
Результат
Что вы получите
- Работать с gulp
- Верстать в методологии БЭМ
- Работать с препроцессорами
- Делать адаптивную вёрстку
- Применять медиа-выражения
- Делать вёрстку резиновой
- Использовать bootstrap
Аудитория
Для кого этот курс
- Курс для тех, кто уже знаком с основами вёрстки. Рекомендуется пройти наш базовый курс по вёрстке, чтобы обладать пониманием основ HTML, CSS и базовых приёмов вёрстки.
Содержание
8 занятийПрограмма курса
№ТемаЧто внутри
01Git и настройка проекта
- Консоль. Создание проекта
- Основы работы с GitHub
- Подключение NPM и работа с ним
- Работа с gulp
- Домашнее задание
02Методологии вёрстки и семантика
- Вёрстка макета с БЭМ
- Вёрстка формы
- Домашнее задание
03Препроцессоры. Графика. Шрифты
- Вёрстка элементов макета
- Работа с препроцессорами
- Настройка и подключение шрифтов
- Оптимизация скрипта
- Настройка элементов страницы
- Оптимизация изображений
- Тестирование
04Концепции вёрстки. Адаптивность
- Настройка базовой стилизации
- Настройка стилей footer
- Настройка сетки блоков
- Адаптивная вёрстка под разные типы экранов
- Тестирование
05Медиа выражения
- Вёрстка footer
- Адаптивная вёрстка с медиа выражениями
- Добавляем адаптивную вёрстку в проект
- Вёрстка блока About
- Адаптивная вёрстка блоков
- Адаптивная вёрстка footer
- Тестирование
06Относительные единицы. Резиновая вёрстка
- Делаем Header
- Настройка padding в Header
- Отступы элементов в адаптивной вёрстке
- Делаем git rebase
- Резиновая вёрстка - введение
- Резиновая вёрстка блоков с изображениями
- Убираем полосы прокрутки
- Оптимизация резиновой вёрстки
- Тестирование
07Картинки адаптивные и резиновые. Спрайт. Грид
- Оптимизируем резиновую вёрстку под маленькие экраны
- Оптимизация резиновой вёрстки хедера под мобильную версию
- Оптимизация резиновой вёрстки для оставшихся блоков
- Ретинизация
- Настройка резиновой картинки
- Настройка отображения изображения в зависимости от размера экран
- Знакомство с классом grid
- Настройка ретинизации через стили css
- Меняем картинки для ретины
- Делаем всплывающую форму при помощи grid
- Создаём и подключаем в проект svg-спрайты
- Тестирование
08Бутстрап. Открытые формы. Слайдер
- Разбор домашнего задания по вёрстке картинок
- Разбор вёрстки форм
- Разбор Bootstrap
- Подключение Bootstrap кнопки
- Делаем навигационную панель при помощи Bootstrap
- Правка стилей Bootstrap
- Делаем слайдер/карусель с использованием Bootstrap
- Создание модального окна при помощи Bootstrap
- Доделываем модальное окно
- Разбор сетки Bootstrap
- Подключение и настройка Swiper
- Продолжаем настраивать Swiper
- Настройка автоматизации сборки
- Рекомендации по доработке кнопки
- Тестирование
01Git и настройка проекта
- Консоль. Создание проекта
- Основы работы с GitHub
- Подключение NPM и работа с ним
- Работа с gulp
- Домашнее задание
02Методологии вёрстки и семантика
- Вёрстка макета с БЭМ
- Вёрстка формы
- Домашнее задание
03Препроцессоры. Графика. Шрифты
- Вёрстка элементов макета
- Работа с препроцессорами
- Настройка и подключение шрифтов
- Оптимизация скрипта
- Настройка элементов страницы
- Оптимизация изображений
- Тестирование
04Концепции вёрстки. Адаптивность
- Настройка базовой стилизации
- Настройка стилей footer
- Настройка сетки блоков
- Адаптивная вёрстка под разные типы экранов
- Тестирование
05Медиа выражения
- Вёрстка footer
- Адаптивная вёрстка с медиа выражениями
- Добавляем адаптивную вёрстку в проект
- Вёрстка блока About
- Адаптивная вёрстка блоков
- Адаптивная вёрстка footer
- Тестирование
06Относительные единицы. Резиновая вёрстка
- Делаем Header
- Настройка padding в Header
- Отступы элементов в адаптивной вёрстке
- Делаем git rebase
- Резиновая вёрстка - введение
- Резиновая вёрстка блоков с изображениями
- Убираем полосы прокрутки
- Оптимизация резиновой вёрстки
- Тестирование
07Картинки адаптивные и резиновые. Спрайт. Грид
- Оптимизируем резиновую вёрстку под маленькие экраны
- Оптимизация резиновой вёрстки хедера под мобильную версию
- Оптимизация резиновой вёрстки для оставшихся блоков
- Ретинизация
- Настройка резиновой картинки
- Настройка отображения изображения в зависимости от размера экран
- Знакомство с классом grid
- Настройка ретинизации через стили css
- Меняем картинки для ретины
- Делаем всплывающую форму при помощи grid
- Создаём и подключаем в проект svg-спрайты
- Тестирование
08Бутстрап. Открытые формы. Слайдер
- Разбор домашнего задания по вёрстке картинок
- Разбор вёрстки форм
- Разбор Bootstrap
- Подключение Bootstrap кнопки
- Делаем навигационную панель при помощи Bootstrap
- Правка стилей Bootstrap
- Делаем слайдер/карусель с использованием Bootstrap
- Создание модального окна при помощи Bootstrap
- Доделываем модальное окно
- Разбор сетки Bootstrap
- Подключение и настройка Swiper
- Продолжаем настраивать Swiper
- Настройка автоматизации сборки
- Рекомендации по доработке кнопки
- Тестирование
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Продвинутая вёрстка с HTML, CSS, Figma» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
