Программирование [Александр Ламков] [Stepik] Вёрстка сайта с нуля: JSX, SCSS, JS, Vite, Minista, БЭМ (2025)

[RoBot]

Описание [Александр Ламков] [Stepik] Вёрстка сайта с нуля: JSX, SCSS, JS, Vite, Minista, БЭМ (2025):

Если вы уже знакомы с HTML, CSS и JavaScript, то самое время применить свои знания на практике!

Создайте фронтенд для веб-приложения, используя современные технологии. Вас ждёт много сложной вёрстки, тысячи строк качественного JavaScript-кода и уникальная сборка с JSX-шаблонизатором.

Это отличный проект для вашего портфолио и отличная тренировка перед тем, как погрузиться в изучение фронтенд-фреймворков.

Что вы узнаете и научитесь делать:

Разрабатывать сайты, используя современный стек технологий.
Создавать сложные UI-компоненты с помощью JavaScript, используя грамотно структурированный ООП-подход.
Использовать различные JavaScript API, такие как Proxy, ResizeObserver и MatchMedia.
Применять фреймворк Minista для ускорения процесса вёрстки.
Использовать современный сборщик проектов Vite для автоматизации рутинных действий.
Писать декомпозированную разметку в JSX синтаксисе.
Именовать классы элементов в разметке согласно методологии БЭМ.
Применять современные HTML-теги, такие как dialog, details, summary, dl, dt, dd, time и другие.
Оперировать современным синтаксисом CSS, включая Flex и Grid-сетки, адаптивные единицы измерения, псевдоклассы и необычные свойства.
Применять современные HTML-теги, такие как dialog, details, summary, dl, dt, dd, time и другие.
Оперировать современным синтаксисом CSS, включая Flex и Grid-сетки, адаптивные единицы измерения, псевдоклассы и необычные свойства.
Применять всю мощь препроцессора стилей Sass в синтаксисе SCSS.
Обрабатывать код пост-процессором стилей PostCSS и плагином postcss-pxtorem.
Работать с менеджером пакетов NPM.
Применять библиотеки Swiper, IMaskJS и classNames.
Анализировать макет в Figma.
Дебажить вёрстку в DevTools браузера.
Внедрять принципы доступности в код, используя WAI-ARIA и атрибуты role.

О курсе:
Цель курса — пошагово реализовать фронтенд многостраничного приложения стримингового сервиса, который состоит из 6 полноценных страниц со множеством секций и непростых UI компонентов.
Нам здесь встретятся такие компоненты интерфейса как табы, мобильное меню, открывающееся и закрывающееся при клике на кнопку “бургер”, кастомный видеоплеер, множество слайдеров, маски для полей ввода, а так же кастомный селект — всё это мы будем реализовывать с помощью ванильного JavaScript и используем мы лишь нескольких сторонних NPM-библиотек.
Классы элементов в разметке мы будем именовать по БЭМ-методологии, а для комфортного написания стилей мы будем использовать препроцессор стилей Sass на диалекте SCSS.
И вишенка на торте — мы будем использовать сборщик проектов Vite в обёртке в виде фреймворка Minista, где есть самая нужная нам функциональность — шаблонизатор разметки на основе синтаксиса JSX (да-да, тот самый, из мира React).
Пример того, что из себя представляют материалы курса — мой последний МК на YouTube. Только в этот раз — проект ещё более насыщенный, с весьма приятным стеком технологий, который значительно упрощает процесс разработки.

Для кого этот курс:
Начинающие фронтенд-разработчики, которые хотят попрактиковаться в применении ванильного JavaScript прежде, чем приступать к изучению более серьёзных технологий, таких как React / Vue / Angluar • Более опытные фронтенд-разработчики, которые хотят освоиться в современных возможностях HTML, CSS и JavaScript • Фронтенд-разработчики любого уровня, которые хотят научиться быстро и удобно разрабатывать MPA (многостраничные приложения) на современном стеке с помощью SSG (Static Site Generator) с шаблонизатором разметки на JSX-синтаксисе

Начальные требования:
Важно на базовом уровне знать HTML, CSS, JavaScript.
А так же желательно быть знакомым с метолологией БЭМ и препроцессором стилей Sass.

Программа курса:
Введение, подготовка папок и файлов

1. Введение. Что будет в мастер-классе. Что нужно знать
2. Сборщик проектов Vite и фреймворк Minista
3. Установка Minista и библиотек. Настройка сборщика проектов
4. Подготовка структуры папок проекта
5. Файлы constants.scss и functions.scss — Sass-константы и функции
6. Файл mixins.scss — Sass-миксины
7. Файл media.scss — Sass-миксины для медиавыражений
8. Файл helpers/index.js, автоподключение через сборщик проектов
9. Подключение нормализации стилей
10. Подключение шрифтов
11. Файл variables.scss — подготовка глобальных CSS-переменных
12. Файл utils.scss — подготовка утилитарных классов
13. Файл globals.scss — подготовка глобальных стилей
14. Шаблонизатор разметки JSX. Знакомство с синтаксисом. Особенности
15. Файл global.jsx — настройка глобальной обертки каждой из страниц

Шапка и футер страницы (Header и Footer)

1. Sticky эффект, применение scroll animation-timelineДемо-доступ
2. Компонент Logo, библиотека classNames
3. Меню навигации, списки в JSX, метод массивов map
4. Компоненты Button и Icon, SVG-спрайты
5. Компонент BurgerButton
6. Меню-оверлей, HTML-элемент dialog, display contents
7. JavaScript-модуль OverlayMenu
8. Футер страницы — компоненты Socials и Button (доработка)

Главная страница

1. Секция Hero, доработка Header
2. Секция Categories — компонент Section
3. Секция Categories — компоненты CategoryCard и Image
4. Секция Categories — компоненты Slider и SliderNavigation
5. Секция Categories — JavaScript-модуль SliderCollection (2 шага)
6. Секция Devices — компоненты Grid и DeviceCard
7. Секция Questions — компонент AccordionGroup
8. Секция Questions — компонент Accordion
9. Секция Plans — компоненты PlanCard и Button (доработка)
10. Секция Plans — компоненты Tabs и TabsNavigation
11. Секция Plans — JavaScript-модуль TabsCollection (2 шага)
12. Абстрактный класс BaseComponent, Proxy API, доработка Tabs
13. Секция Banner, доработка Content

Страница Movies

1. Секция MoviesBanner — MovieBannerCard, Slider (2 шага)
2. Секция Collections — компонент Badge (2 шага)
3. Секция Collections — компоненты MovieCard и RatingView (3 шага)

Страница Movie (детальная страница фильма)

1. Секция MovieBanner, доработка компонента MovieBannerCard
2. Секция MovieDetails — компоненты PersonCard, ReviewCard (2 шага)
3. Секция MovieDetails — компоненты Tags, Rating и PersonCard
4. Секция MovieDetails — стилизация, Slider и SliderNavigation

Страница Show (детальная страница сериала)

1. Секция ShowBanner
2. Секция MovieDetails — Seasons, AccordionGroup, Accordion
3. Секция MovieDetails, компоненты Seasons и EpisodeCard (2 шага)
4. Секция MovieDetails, JavaScript-модуль VideoPlayer

Страница Support

1. Секция Support — компонент Field (2 шага)
2. Секция Support — JavaScript-модуль InputMask
3. Секция Support — компонент Checkbox
4. Секция Support — компонент Select (разметка)
5. Секция Support — компонент Select (стилизация)
6. Секция Support — JavaSscript-модуль Select (2 шага)

Страница Subscriptions

1. Секция PlansComparison — компонент Table

Финал

1. Рефакторинг и исправление ошибок
2. Сборка приложения
3. Заключение

Подробнее:

Скачать курс [Александр Ламков] [Stepik] Вёрстка сайта с нуля: JSX, SCSS, JS, Vite, Minista, БЭМ (2025):