SASS

SCSS

Bootstrap

Pug

Gulp

Bootstrap

Научитесь верстать адаптивные сайты на Bootstrap 5, писать стили на SASS и собирать проект в Gulp

Начать учиться

Входит в подписку (более 50 навыков)

Артем Архипов

наставник

Программа обучения

1. Настройка окружения

11 упражнений

10 квизов

Установка Node.js

NPM

NPX

Установка и удаление зависимостей

Точка входа в приложении

Установка Node.js

Особенности JavaScript как языка, установка Node.js, запуск кода в REPL

Работа с NPM

Зависимости и dev-зависимости, lock-файл, глобальная установка, NPX, точка входа

Линтинг

Линтер oxlint и форматтер oxfmt, настройка правил проверки кода

2. SASS

12 упражнений

11 квизов

SASS

компиляция в CSS

Шаблонные селекторы

Переменные

Миксины

Управляющие конструкции в SASS

Pug

SASS основы

Установка зависимостей для работы с SASS, Шаблонные селекторы, Переменные, Миксины

SASS программирование

Типы данных, Функции, Условные конструкции, Циклы

Препроцессор Pug

Установка и настройка Pug, Теги и контент в Pug, Подключение модулей, Использование JavaScript, Условные конструкции и типы

3. Bootstrap

47 упражнений

27 квизов

Bootstrap

Gulp

Адаптивность

Сетка Bootstrap

Компоненты Bootstrap

Утилиты Bootstrap

Bootstrap 5: основы вёрстки

Установка Bootstrap, сетка и адаптивность, работа с текстом, таблицы, компоненты и утилиты, Bootstrap Icons

Gulp

Установка Gulp, Gulpfile, базовые функции, отслеживание изменений через watch, подключение сторонних пакетов

Bootstrap 5: продвинутый уровень

Собственные компоненты и утилиты, цветовые схемы, тёмная и светлая тема, оптимизация проекта

Проекты

Мессенджер «Hexlet Chat»

Разработаете полноценный веб-проект с использованием Gulp для автоматической сборки и подготовки к развертыванию. В проекте настроите компиляцию Pug и SASS, оптимизируете изображения и организуете файловую структуру. Освоите современные подходы к вёрстке с помощью Bootstrap, OOCSS и Atomic CSS, а также научитесь работать с макетом в Figma и адаптировать интерфейс под разные устройства. Итоговый проект разместите на GitHub и сможете показать его в портфолио.

Как проходит обучение

Просто и наглядно

Теория в удобном текстовом формате — легко читать даже с телефона. Живые примеры помогают понять, как всё работает. Материал выстроен так, чтобы вы двигались шаг за шагом, не упуская важных деталей

Проверяем и закрепляем знания

Учитесь на реальных задачах

Ваш AI наставник

Подписка от 2 400 ₽/мес

Этот навык уже входит в подписку. Оформи доступ и открывай все навыки сразу (50+)

Подписаться →