Верстка сайтов [Stepik] Вёрстка сайта с нуля - JSX, SCSS, JS, Vite, Minista, БЭМ (2025)

[Брат Тук]

Автор: Stepik
Название: Вёрстка сайта с нуля - JSX, SCSS, JS, Vite, Minista, БЭМ (2025)

Описание

Уже знаете HTML, CSS и JavaScript? Примените знания на практике — шаг за шагом разработайте фронтенд для веб-приложения на современном стеке технологий! В курсе вас ждет много сложной вёрстки, тысячи строк качественного JavaScript-кода и крутейшая SSG-сборка с JSX-шаблонизатором на борту. Достойный проект для портфолио и мощная тренировка перед тем, как погрузиться в дальнейшее изучение фронтенд-фреймворков!

Чему вы научитесь

• Разрабатывать сайты на современном стеке технологий
• С помощью 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)

О курсе
Цель курса — пошагово реализовать фронтенд многостраничного приложения стримингового сервиса, который состоит из 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. Заключение

Подробнее:

Скачать:

 

[Dunckhump]

Интересно, но, лично для меня, сложновато. Особенно части, что касается css.
Хотя больше всего мне не нравится подобный формат, формат интенсива. Где показывается, но не объясняется на достаточном уровне. Мне не хватило задач и возможности не банально переписывать код, а включаться в разработку в сосценерированых для этого моментах