Stepik Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ
О курсе
Подробнее
Цель курса — пошагово реализовать фронтенд многостраничного приложения стримингового сервиса, который состоит из 6 полноценных страниц со множеством секций и непростых UI компонентов.
Нам здесь встретятся такие компоненты интерфейса как табы, мобильное меню, открывающееся и закрывающееся при клике на кнопку “бургер”, кастомный видеоплеер, множество слайдеров, маски для полей ввода, а так же кастомный селект — всё это мы будем реализовывать с помощью ванильного JavaScript и используем мы лишь нескольких сторонних NPM-библиотек.
Классы элементов в разметке мы будем именовать по БЭМ-методологии, а для комфортного написания стилей мы будем использовать препроцессор стилей Sass на диалекте SCSS.
И вишенка на торте — мы будем использовать сборщик проектов Vite в обёртке в виде фреймворка Minista, где есть самая нужная нам функциональность — шаблонизатор разметки на основе синтаксиса JSX (да-да, тот самый, из мира React).
Пример того, что из себя представляют материалы курса — мой последний МК на YouTube. Только в этот раз — проект ещё более насыщенный, с весьма приятным стеком технологий, который значительно упрощает процесс разработки.
Требования
Что нужно для старта
- Важно на базовом уровне знать HTML, CSS, JavaScript. А так же желательно быть знакомым с метолологией БЭМ и препроцессором стилей Sass.
Результат
Что вы получите
- Разрабатывать сайты на современном стеке технологий
- С помощью JavaScript реализовывать сложные UI-компоненты (Select, Tabs, Slider, VideoPlayer, InputMask, OverlayMenu) через грамотно структурированный ООП-подход (синтаксис классов, механика наследования от абстрактных классов, методы-геттеры и др.)
- Применять различные JavaScript API: Proxy, ResizeObserver, MatchMedia
- Использовать фреймворк Minista (SSG, Static Site Generator) для ускорения процесса вёрстки
- Использовать современный сборщик проектов Vite для автоматизации рутинных действий: обработка и минификация файлов стилей, обфускация скриптов, сжатие картинок, формирование SVG-иконок в спрайты
- Писать декомпозированную разметку в JSX синтаксисе (крайне полезная технология для тех, кто планирует в дальнейшем изучать React)
- Именовать классы элементов в разметке согласно БЭМ методологии
- Применять современные HTML-теги: dialog, details, summary, dl, dt, dd, time и др.
- Оперировать современным синтаксисом CSS: Flex и Grid-сетки, адаптивные единицы измерения (vw, vh, rem, em), псевдоклассы (has, nth, not, user-invalid, focus-visible), необычные свойства (appearance, column-count, break-inside, clip-path, grid-template-areas, grid-auto-flow, overscroll-behavior, display contents, transition-behavior), свойства-шорткаты (inset, inset-inline, padding-block, padding-inline, margin-inline), современный синтаксис медиазапросов, Scroll-driven Animations
- Применять всю мощь препроцессора стилей Sass в синтаксисе SCSS: миксины, функции, условия, переменные, директивы use и forward
- Обрабатывать код пост-процессором стилей PostCSS и плагином postcss-pxtorem для автоматического перевода единиц измерения пикселей в rem
- Работать с менеджером пакетов NPM (установка и использование сторонних зависимостей)
- Применять библиотеки Swiper, IMaskJS, classNames
- Анализировать макет в Figma
- Дебажить вёрстку в DevTools браузера
- Внедрять принципы Accessibility в код (WAI-ARIA и атрибуты role)
Аудитория
Для кого этот курс
- • Начинающие фронтенд-разработчики, которые хотят попрактиковаться в применении ванильного JavaScript прежде, чем приступать к изучению более серьёзных технологий, таких как React / Vue / Angluar
- • Более опытные фронтенд-разработчики, которые хотят освоиться в современных возможностях HTML, CSS и JavaScript
- • Фронтенд-разработчики любого уровня, которые хотят научиться быстро и удобно разрабатывать MPA (многостраничные приложения) на современном стеке с помощью SSG (Static Site Generator) с шаблонизатором разметки на JSX-синтаксисе
Содержание
9 занятийПрограмма курса
№ТемаЧто внутри
01Введение, подготовка папок и файлов
- Введение. Что будет в мастер-классе. Что нужно знать
- Сборщик проектов 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 для быстрого создания компонентов
02Шапка и футер страницы (Header и Footer)
- Sticky эффект, применение scroll animation-timeline
- Компонент Logo, библиотека classNames
- Меню навигации, списки в JSX, метод массивов map
- Компоненты Button и Icon, SVG-спрайты
- Компонент BurgerButton
- Меню-оверлей, HTML-элемент dialog, display contents
- JavaScript-модуль OverlayMenu
- Футер страницы — компоненты Socials и Button (доработка)
03Главная страница
- Секция 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
04Страница Movies
- Секция MoviesBanner — MovieBannerCard, Slider (2 шага)
- Секция Collections — компонент Badge (2 шага)
- Секция Collections — компоненты MovieCard и RatingView (3 шага)
05Страница Movie (детальная страница фильма)
- Секция MovieBanner, доработка компонента MovieBannerCard
- Секция MovieDetails — компоненты PersonCard, ReviewCard (2 шага)
- Секция MovieDetails — компоненты Tags, Rating и PersonCard
- Секция MovieDetails — стилизация, Slider и SliderNavigation
06Страница Show (детальная страница сериала)
- Секция ShowBanner
- Секция MovieDetails — Seasons, AccordionGroup, Accordion
- Секция MovieDetails, компоненты Seasons и EpisodeCard (2 шага)
- Секция MovieDetails, JavaScript-модуль VideoPlayer
07Страница Support
- Секция Support — компонент Field (2 шага)
- Секция Support — JavaScript-модуль InputMask
- Секция Support — компонент Checkbox
- Секция Support — компонент Select (разметка)
- Секция Support — компонент Select (стилизация)
- Секция Support — JavaSscript-модуль Select (2 шага)
08Страница Subscriptions
- Секция PlansComparison — компонент Table (2 шага)
09Финал
- Рефакторинг и исправление ошибок
- Сборка приложения
- Заключение
01Введение, подготовка папок и файлов
- Введение. Что будет в мастер-классе. Что нужно знать
- Сборщик проектов 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 для быстрого создания компонентов
02Шапка и футер страницы (Header и Footer)
- Sticky эффект, применение scroll animation-timeline
- Компонент Logo, библиотека classNames
- Меню навигации, списки в JSX, метод массивов map
- Компоненты Button и Icon, SVG-спрайты
- Компонент BurgerButton
- Меню-оверлей, HTML-элемент dialog, display contents
- JavaScript-модуль OverlayMenu
- Футер страницы — компоненты Socials и Button (доработка)
03Главная страница
- Секция 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
04Страница Movies
- Секция MoviesBanner — MovieBannerCard, Slider (2 шага)
- Секция Collections — компонент Badge (2 шага)
- Секция Collections — компоненты MovieCard и RatingView (3 шага)
05Страница Movie (детальная страница фильма)
- Секция MovieBanner, доработка компонента MovieBannerCard
- Секция MovieDetails — компоненты PersonCard, ReviewCard (2 шага)
- Секция MovieDetails — компоненты Tags, Rating и PersonCard
- Секция MovieDetails — стилизация, Slider и SliderNavigation
06Страница Show (детальная страница сериала)
- Секция ShowBanner
- Секция MovieDetails — Seasons, AccordionGroup, Accordion
- Секция MovieDetails, компоненты Seasons и EpisodeCard (2 шага)
- Секция MovieDetails, JavaScript-модуль VideoPlayer
07Страница Support
- Секция Support — компонент Field (2 шага)
- Секция Support — JavaScript-модуль InputMask
- Секция Support — компонент Checkbox
- Секция Support — компонент Select (разметка)
- Секция Support — компонент Select (стилизация)
- Секция Support — JavaSscript-модуль Select (2 шага)
08Страница Subscriptions
- Секция PlansComparison — компонент Table (2 шага)
09Финал
- Рефакторинг и исправление ошибок
- Сборка приложения
- Заключение
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 14 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
