Компетенция Верстальщик — HTML, CSS, JavaScript
Подробнее
Что нужно для старта
- Базовое владение ПК и Интернет
Что вы получите
- Верстка веб-страниц по макетам
- Блочная верстка
- Семантическая и валидная верстка
- Адаптив и кроссбраузерность
- Анимации и трансформации
- БЭМ
- FlexBox и Grid
- Препроцессор SCSS
- Bootstrap 5
- Нарезка макетов Photoshop, Figma, Zeplin
- JavaScript для верстальщика
- Использование js-библиотек
- Проект верстки с нуля до результата
Для кого этот курс
- Для тех, кто с нуля хочет выучить HTML, CSS и JavaScript и начать профессию верстальщика сайтов (в том числе с возможностью работать удалённо)
- Для тех, кто хочет актуализировать свои знания по верстке под современные требования рынка
- Для тех, кто хочет сделать себе сайт и не хочет зависеть от фрилансеров
- Для тех, кто хочет войти в богатый мир IT и не знает с чего начать. Верстка сайтов - это только начало большого пути в веб-разработке!
Программа курса
- Введение
- Основы HTML
- Основы CSS
- Работа с текстом
- Работа с блочными элементами
- Стилизация блочных элементов
- Работа со ссылками и кнопками
- Работа с изображениями и иконками
- Псевдоклассы и псевдоэлементы CSS
- Структура сайта и типы макетов
- Таблицы и табличная верстка
- Блочная модель верстки old-style
- Позиционирование, выпадающее меню
- Введение во FlexBox
- Блочная модель верстки на флексах
- Проверка знаний
- Нарезка макета в Photoshop
- Zeplin и импорт из Photoshop или Figma
- Мастер-класс по верстке макета
- Основы БЭМ
- Элементы форм
- Добавление аудио и видео
- Фильтры CSS
- Семантические теги HTML5
- Кроссбраузерность
- Трансформации CSS3
- Анимации CSS3
- Работа с адаптивом
- Базовое использование препроцессора SASS|SCSS
- Продвинутое использование SASS|SCSS
- Общие возможности Bootstrap
- Работа с сеткой Bootstrap
- Использование компонентов Bootstrap
- Формы в Bootstrap
- Кастомизация компонентов
- Введение в JavaScript
- Ветвления и циклы
- Объекты и массивы JS
- Функции JS
- Понятие DOM и узлов
- Обработка события по клику
- Создание слайдера на JS
- Создание модального окна
- Создание табов
- Создание фильтра карточек
- Проверка знаний
- Основы jQuery
- Галерея FancyBox
- Анимации ParollerJS, ParallaxJS
- Анимации ScrollMagic
- Адаптивный слайдер SwiperJS
- CSS Grid. Базовая терминология
- Базовые возможности CSS Grid
- Шаблоны и фракции
- Grid области и работа с ними
- Выравнивание
- Методы адаптива
- Нюансы использования
- CSS-переменные
- Проверка знаний
- Обзор шаблона для вёрстки
- UI Kit - что и зачем
- Настройка окружения
- Переменные и типографика
- Компонент "Особенность"
- Компонент "Скриншот"
- Компонент "Отзыв"
- Компонент "Цена"
- Компоненты формы и соц иконок
- Вводный блок сайта
- Блок "О продукте"
- Блок "Особенности"
- Блок "Скриншоты"
- Блок "Отзывы"
- Блок "Цены"
- Блок "Подвал сайта"
- Валидация верстки
- Production-сборка
01Введение
- Введение
02Основы HTML и CSS
- Основы HTML
- Основы CSS
- Работа с текстом
- Работа с блочными элементами
- Стилизация блочных элементов
- Работа со ссылками и кнопками
- Работа с изображениями и иконками
- Псевдоклассы и псевдоэлементы CSS
- Структура сайта и типы макетов
- Таблицы и табличная верстка
- Блочная модель верстки old-style
- Позиционирование, выпадающее меню
- Введение во FlexBox
- Блочная модель верстки на флексах
- Проверка знаний
03Работа с макетами
- Нарезка макета в Photoshop
- Zeplin и импорт из Photoshop или Figma
- Мастер-класс по верстке макета
04Продвинутые техники HTML, CSS
- Основы БЭМ
- Элементы форм
- Добавление аудио и видео
- Фильтры CSS
- Семантические теги HTML5
- Кроссбраузерность
- Трансформации CSS3
- Анимации CSS3
- Работа с адаптивом
- Базовое использование препроцессора SASS|SCSS
- Продвинутое использование SASS|SCSS
05Bootstrap
- Общие возможности Bootstrap
- Работа с сеткой Bootstrap
- Использование компонентов Bootstrap
- Формы в Bootstrap
- Кастомизация компонентов
06JavaScript для верстальщика
- Введение в JavaScript
- Ветвления и циклы
- Объекты и массивы JS
- Функции JS
- Понятие DOM и узлов
- Обработка события по клику
- Создание слайдера на JS
- Создание модального окна
- Создание табов
- Создание фильтра карточек
- Проверка знаний
07Библиотеки JavaScript
- Основы jQuery
- Галерея FancyBox
- Анимации ParollerJS, ParallaxJS
- Анимации ScrollMagic
- Адаптивный слайдер SwiperJS
08БОНУС: Спецификация CSS Grid (видео с моего YouTube-канала)
- CSS Grid. Базовая терминология
- Базовые возможности CSS Grid
- Шаблоны и фракции
- Grid области и работа с ними
- Выравнивание
- Методы адаптива
- Нюансы использования
- CSS-переменные
- Проверка знаний
09Проект Верстки макета от и до
- Обзор шаблона для вёрстки
- UI Kit - что и зачем
- Настройка окружения
- Переменные и типографика
- Компонент "Особенность"
- Компонент "Скриншот"
- Компонент "Отзыв"
- Компонент "Цена"
- Компоненты формы и соц иконок
- Вводный блок сайта
- Блок "О продукте"
- Блок "Особенности"
- Блок "Скриншоты"
- Блок "Отзывы"
- Блок "Цены"
- Блок "Подвал сайта"
- Валидация верстки
- Production-сборка
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Компетенция Верстальщик — HTML, CSS, JavaScript» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.

Stepik 

















