Stepik Профессия: Web-верстальщик [ верстка + Git + GitHub ]
О курсе
Подробнее
Этот интенсивный практический курс научит вас современной веб-вёрстке от А до Я. Вы освоите не только HTML и CSS, но и весь профессиональный стек технологий, необходимый для создания сложных адаптивных интерфейсов.
🎯 Цель курса
🛠️ Подготовить специалистов, способных самостоятельно верстать сложные проекты
🛠️ Научить эффективной работе в команде с использованием современных инструментов
📚 Что входит в программу
🎨 Вёрстка на JSX и SCSS
⚡ Создание UI-компонентов на JavaScript
🔧 Работа с Git и GitHub
🚀 Современные инструменты сборки (Vite, Minista)
✨ Особенности обучения
💡 Практическая направленность: каждый модуль закрепляется реальными задачами
💡 Создание нескольких проектов для портфолио
💡 Освоение полного цикла разработки
📈 Результат
🌟 Готовность к позиции верстальщика или junior-фронтенд разработчика
🌟 Умение работать с современным стеком технологий
🌟 Навыки командной разработки и контроля версий
⏱ Формат
Видеоуроки + практические задания + работа над реальными проектами + поддержка кураторов
Требования
Что нужно для старта
- Git:
- 🖥️ Базовых навыков работы с компьютером (управление файлами, установка программ, использование браузера).
- ⌨️ Минимального опыта в текстовом вводе (умение печатать и редактировать текст).
- Верстка:
- Важно на базовом уровне знать HTML, CSS, JavaScript. А так же желательно быть знакомым с метолологией БЭМ и препроцессором стилей Sass.
Результат
Что вы получите
- Создавать современные адаптивные сайты с использованием JSX, SCSS и JavaScript
- Разрабатывать сложные UI-компоненты (слайдеры, видеоплееры, формы) с помощью ООП-подхода
- Применять современные инструменты сборки: Vite, Minista и шаблонизатор на основе JSX
- Работать с системой контроля версий Git и платформой GitHub для командной разработки
- Использовать препроцессор SCSS для эффективной организации стилей
- Внедрять принципы доступности (WAI-ARIA) и методологию БЭМ в проекты
- Настраивать сборку проекта с обработкой стилей, скриптов и изображений
- Анализировать макеты в Figma и дебажить вёрстку в DevTools
- Публиковать готовые проекты с использованием GitHub
Аудитория
Для кого этот курс
- ✅ Начинающие верстальщики
- Которые хотят освоить современный стек технологий и создавать сложные адаптивные проекты
- ✅ Фронтенд-разработчики
- Которые хотят углубить знания в вёрстке и освоить современные инструменты сборки
- ✅ Выпускники IT-курсов
- Которым нужны практические навыки для усиления портфолио реальными проектами
- ✅ Специалисты из смежных профессий
- Дизайнеры, бэкенд-разработчики, тестировщики, желающие освоить веб-вёрстку
Содержание
13 занятийПрограмма курса
№ТемаЧто внутри
01Git [1] Основы Git
- Знакомство
- О курсе
- Обзор систем контроля версий
- Установка и настройка Git
- Первый репозиторий
- Первый коммит
- Индекс
- Подробнее о коммита
- Откат изменений
- Удаление файлов
- Переименование/перемещение файлов
- Просмотр изменений
- История коммитов
- Машина времени (изменение истории)
- Игнорирование файлов
- Домашнее задание
02Git [2] GitHub
- Создание удаленного репозитория
- Клонирование репозитория
- SSH аутентификация
- Копирование чужого репозитория (fork)
- GitHub Copilot
- Файл Readme.md и разметка Markdown
- Альтернативы GitHub
- Домашнее задание
03Git [3] Ветвление и командная работа
- Введение в ветки
- Переключение между ветками
- Создание, просмотр, удаление веток
- Слияние веток
- Конфликты при слиянии
- Экстренное переключение между задачами
- Безопасное обновление репозитория
- Поиск автора кода
- Запросы на слияние (Pull Request)
- Большая шпаргалка
04Вёрстка: введение, подготовка папок и файлов
- Введение. Что будет в мастер-классе. Что нужно знать
- Сборщик проектов Vite и фреймворк Minista
- Установка Minista и библиотек. Настройка сборщика проектов
- Подготовка структуры папок проекта
- Файлы constants.scss и functions.scss — Sass-константы и функции
- Файл mixins.scss — Sass-миксины
- Файл media.scss — Sass-миксины для медиавыражений
- Файл helpers/index.js, автоподключение через сборщик проектов
- Подключение нормализации стилей
- Подключение шрифтов
- Файл variables.scss — подготовка глобальных CSS-переменных
- Файл utils.scss — подготовка утилитарных классов
- Файл globals.scss — подготовка глобальных стилей
- Шаблонизатор разметки JSX. Знакомство с синтаксисом. Особенности
- Файл global.jsx — настройка глобальной обертки каждой из страниц
- Настройка шаблона в WebStorm для быстрого создания компонентов
05Шапка и футер страницы (Header и Footer)
- Sticky эффект, применение scroll animation-timeline
- Компонент Logo, библиотека classNames
- Меню навигации, списки в JSX, метод массивов map
- Компоненты Button и Icon, SVG-спрайты
- Компонент BurgerButton
- Меню-оверлей, HTML-элемент dialog, display contents
- JavaScript-модуль OverlayMenu
- Футер страницы — компоненты Socials и Button (доработка)
06Главная страница
- Секция Hero, доработка Header
- Секция Categories — компонент Section
- Секция Categories — компоненты CategoryCard и Image
- Секция Categories — компоненты Slider и SliderNavigation
- Секция Categories — JavaScript-модуль SliderCollection (2 шага)
- Секция Devices — компоненты Grid и DeviceCard
- Секция Questions — компонент AccordionGroup
- Секция Questions — компонент Accordion
- Секция Plans — компоненты PlanCard и Button (доработка)
- Секция Plans — компоненты Tabs и TabsNavigation
- Секция Plans — JavaScript-модуль TabsCollection (2 шага)
- Абстрактный класс BaseComponent, Proxy API, доработка Tabs
- Секция Banner, доработка Content
07Страница Movies
- Секция MoviesBanner — MovieBannerCard, Slider (2 шага)
- Секция Collections — компонент Badge (2 шага)
- Секция Collections — компоненты MovieCard и RatingView (3 шага)
08Страница Movie (детальная страница фильма)
- Секция MovieBanner, доработка компонента MovieBannerCard
- Секция MovieDetails — компоненты PersonCard, ReviewCard (2 шага)
- Секция MovieDetails — компоненты Tags, Rating и PersonCard
- Секция MovieDetails — стилизация, Slider и SliderNavigation
09Страница Show (детальная страница сериала)
- Секция ShowBanner
- Секция MovieDetails — Seasons, AccordionGroup, Accordion
- Секция MovieDetails, компоненты Seasons и EpisodeCard (2 шага)
- Секция MovieDetails, JavaScript-модуль VideoPlayer
10Страница Support
- Секция Support — компонент Field (2 шага)
- Секция Support — JavaScript-модуль InputMask
- Секция Support — компонент Checkbox
- Секция Support — компонент Select (разметка)
- Секция Support — компонент Select (стилизация)
- Секция Support — JavaSscript-модуль Select (2 шага)
11Страница Subscriptions
- Секция PlansComparison — компонент Table (2 шага)
12Финал
- Рефакторинг и исправление ошибок
- Сборка приложения
- Заключение
13Завершение учебной программы
- Итоги
01Git [1] Основы Git
- Знакомство
- О курсе
- Обзор систем контроля версий
- Установка и настройка Git
- Первый репозиторий
- Первый коммит
- Индекс
- Подробнее о коммита
- Откат изменений
- Удаление файлов
- Переименование/перемещение файлов
- Просмотр изменений
- История коммитов
- Машина времени (изменение истории)
- Игнорирование файлов
- Домашнее задание
02Git [2] GitHub
- Создание удаленного репозитория
- Клонирование репозитория
- SSH аутентификация
- Копирование чужого репозитория (fork)
- GitHub Copilot
- Файл Readme.md и разметка Markdown
- Альтернативы GitHub
- Домашнее задание
03Git [3] Ветвление и командная работа
- Введение в ветки
- Переключение между ветками
- Создание, просмотр, удаление веток
- Слияние веток
- Конфликты при слиянии
- Экстренное переключение между задачами
- Безопасное обновление репозитория
- Поиск автора кода
- Запросы на слияние (Pull Request)
- Большая шпаргалка
04Вёрстка: введение, подготовка папок и файлов
- Введение. Что будет в мастер-классе. Что нужно знать
- Сборщик проектов Vite и фреймворк Minista
- Установка Minista и библиотек. Настройка сборщика проектов
- Подготовка структуры папок проекта
- Файлы constants.scss и functions.scss — Sass-константы и функции
- Файл mixins.scss — Sass-миксины
- Файл media.scss — Sass-миксины для медиавыражений
- Файл helpers/index.js, автоподключение через сборщик проектов
- Подключение нормализации стилей
- Подключение шрифтов
- Файл variables.scss — подготовка глобальных CSS-переменных
- Файл utils.scss — подготовка утилитарных классов
- Файл globals.scss — подготовка глобальных стилей
- Шаблонизатор разметки JSX. Знакомство с синтаксисом. Особенности
- Файл global.jsx — настройка глобальной обертки каждой из страниц
- Настройка шаблона в WebStorm для быстрого создания компонентов
05Шапка и футер страницы (Header и Footer)
- Sticky эффект, применение scroll animation-timeline
- Компонент Logo, библиотека classNames
- Меню навигации, списки в JSX, метод массивов map
- Компоненты Button и Icon, SVG-спрайты
- Компонент BurgerButton
- Меню-оверлей, HTML-элемент dialog, display contents
- JavaScript-модуль OverlayMenu
- Футер страницы — компоненты Socials и Button (доработка)
06Главная страница
- Секция Hero, доработка Header
- Секция Categories — компонент Section
- Секция Categories — компоненты CategoryCard и Image
- Секция Categories — компоненты Slider и SliderNavigation
- Секция Categories — JavaScript-модуль SliderCollection (2 шага)
- Секция Devices — компоненты Grid и DeviceCard
- Секция Questions — компонент AccordionGroup
- Секция Questions — компонент Accordion
- Секция Plans — компоненты PlanCard и Button (доработка)
- Секция Plans — компоненты Tabs и TabsNavigation
- Секция Plans — JavaScript-модуль TabsCollection (2 шага)
- Абстрактный класс BaseComponent, Proxy API, доработка Tabs
- Секция Banner, доработка Content
07Страница Movies
- Секция MoviesBanner — MovieBannerCard, Slider (2 шага)
- Секция Collections — компонент Badge (2 шага)
- Секция Collections — компоненты MovieCard и RatingView (3 шага)
08Страница Movie (детальная страница фильма)
- Секция MovieBanner, доработка компонента MovieBannerCard
- Секция MovieDetails — компоненты PersonCard, ReviewCard (2 шага)
- Секция MovieDetails — компоненты Tags, Rating и PersonCard
- Секция MovieDetails — стилизация, Slider и SliderNavigation
09Страница Show (детальная страница сериала)
- Секция ShowBanner
- Секция MovieDetails — Seasons, AccordionGroup, Accordion
- Секция MovieDetails, компоненты Seasons и EpisodeCard (2 шага)
- Секция MovieDetails, JavaScript-модуль VideoPlayer
10Страница Support
- Секция Support — компонент Field (2 шага)
- Секция Support — JavaScript-модуль InputMask
- Секция Support — компонент Checkbox
- Секция Support — компонент Select (разметка)
- Секция Support — компонент Select (стилизация)
- Секция Support — JavaSscript-модуль Select (2 шага)
11Страница Subscriptions
- Секция PlansComparison — компонент Table (2 шага)
12Финал
- Рефакторинг и исправление ошибок
- Сборка приложения
- Заключение
13Завершение учебной программы
- Итоги
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Профессия: Web-верстальщик [ верстка + Git + GitHub ]» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 7 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
