Курс на Stepik
Обложка курса «Компетенция Верстальщик — HTML, CSS, JavaScript» на Stepik
2 550 ₽

Компетенция Верстальщик — HTML, CSS, JavaScript ★ 4.933

Открыть на
STEPIK.ORG

Освойте необходимые технологии современной верстки сайтов - HTML, CSS, JavaScript и начните работать в сфере веб-разработки!

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Компетенция Верстальщик — HTML, CSS, JavaScript»Учеников на курсе 1 046
Сертификаты, выданные на курсе «Компетенция Верстальщик — HTML, CSS, JavaScript»Сертификатов выдано 305
Отзывы о курсе «Компетенция Верстальщик — HTML, CSS, JavaScript»Отзывов получено 15
Рейтинг курса «Компетенция Верстальщик — HTML, CSS, JavaScript»Рейтинг курса 4.933
Уроки в курсе «Компетенция Верстальщик — HTML, CSS, JavaScript»Количество уроков 78
Тесты в курсе «Компетенция Верстальщик — HTML, CSS, JavaScript»Количество квизов 127
Задачи с кодом в курсе «Компетенция Верстальщик — HTML, CSS, JavaScript»Количество задач с кодом 30
Время прохождения курса «Компетенция Верстальщик — HTML, CSS, JavaScript»Время прохождения курса —
Стоимость курса «Компетенция Верстальщик — HTML, CSS, JavaScript»Стоимость курса 2 550 ₽ —
Обновления курса «Компетенция Верстальщик — HTML, CSS, JavaScript»Обновления курса — —
Дата публикации курса «Компетенция Верстальщик — HTML, CSS, JavaScript»Дата публикации курса — ———
Последнее обновление курса «Компетенция Верстальщик — HTML, CSS, JavaScript»Последнее обновление — ———
Сложность easy — ———

Содержание курса

Разделы в курсе «Компетенция Верстальщик — HTML, CSS, JavaScript» 9 разделов Уроки в курсе «Компетенция Верстальщик — HTML, CSS, JavaScript» 78 уроков Тесты в курсе «Компетенция Верстальщик — HTML, CSS, JavaScript» 127 тестов Задачи в курсе «Компетенция Верстальщик — HTML, CSS, JavaScript» 30 задач Время прохождения курса «Компетенция Верстальщик — HTML, CSS, JavaScript» 30 ч. Последнее обновление курса «Компетенция Верстальщик — HTML, CSS, JavaScript» обн. 30 сентября 2026

Введение

1 урок
1. Введение ↗

Основы HTML и CSS

15 уроков
1. Основы HTML ↗
2. Основы CSS ↗
3. Работа с текстом ↗
4. Работа с блочными элементами ↗
5. Стилизация блочных элементов ↗
6. Работа со ссылками и кнопками ↗
7. Работа с изображениями и иконками ↗
8. Псевдоклассы и псевдоэлементы CSS ↗
9. Структура сайта и типы макетов ↗
10. Таблицы и табличная верстка ↗
11. Блочная модель верстки old-style ↗
12. Позиционирование, выпадающее меню ↗
13. Введение во FlexBox ↗
14. Блочная модель верстки на флексах ↗
15. Проверка знаний ↗

Работа с макетами

3 урока
1. Нарезка макета в Photoshop ↗
2. Zeplin и импорт из Photoshop или Figma ↗
3. Мастер-класс по верстке макета ↗

Продвинутые техники HTML, CSS

11 уроков
1. Основы БЭМ ↗
2. Элементы форм ↗
3. Добавление аудио и видео ↗
4. Фильтры CSS ↗
5. Семантические теги HTML5 ↗
6. Кроссбраузерность ↗
7. Трансформации CSS3 ↗
8. Анимации CSS3 ↗
9. Работа с адаптивом ↗
10. Базовое использование препроцессора SASS|SCSS ↗
11. Продвинутое использование SASS|SCSS ↗

Bootstrap

5 уроков
1. Общие возможности Bootstrap ↗
2. Работа с сеткой Bootstrap ↗
3. Использование компонентов Bootstrap ↗
4. Формы в Bootstrap ↗
5. Кастомизация компонентов ↗

JavaScript для верстальщика

11 уроков
1. Введение в JavaScript ↗
2. Ветвления и циклы ↗
3. Объекты и массивы JS ↗
4. Функции JS ↗
5. Понятие DOM и узлов ↗
6. Обработка события по клику ↗
7. Создание слайдера на JS ↗
8. Создание модального окна ↗
9. Создание табов ↗
10. Создание фильтра карточек ↗
11. Проверка знаний ↗

Библиотеки JavaScript

5 уроков
1. Основы jQuery ↗
2. Галерея FancyBox ↗
3. Анимации ParollerJS, ParallaxJS ↗
4. Анимации ScrollMagic ↗
5. Адаптивный слайдер SwiperJS ↗

БОНУС: Спецификация CSS Grid (видео с моего YouTube-канала)

9 уроков
1. CSS Grid. Базовая терминология ↗
2. Базовые возможности CSS Grid ↗
3. Шаблоны и фракции ↗
4. Grid области и работа с ними ↗
5. Выравнивание ↗
6. Методы адаптива ↗
7. Нюансы использования ↗
8. CSS-переменные ↗
9. Проверка знаний ↗

Проект Верстки макета от и до

18 уроков
1. Обзор шаблона для вёрстки ↗
2. UI Kit - что и зачем ↗
3. Настройка окружения ↗
4. Переменные и типографика ↗
5. Компонент "Особенность" ↗
6. Компонент "Скриншот" ↗
7. Компонент "Отзыв" ↗
8. Компонент "Цена" ↗
9. Компоненты формы и соц иконок ↗
10. Вводный блок сайта ↗
11. Блок "О продукте" ↗
12. Блок "Особенности" ↗
13. Блок "Скриншоты" ↗
14. Блок "Отзывы" ↗
15. Блок "Цены" ↗
16. Блок "Подвал сайта" ↗
17. Валидация верстки ↗
18. Production-сборка ↗