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

[Папай]

Ссылка на картинку

Уже знаете 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 компонентов.

Показать больше