Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ

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

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

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

Наши преподаватели

Как проходит обучение

  • Мастер-класс в формате видео-лекции длительностью от 3 до 25 минут с самостоятельной проверкой результата.
  • В одном видео разбирается одна тема (один файл, компонент или JS-модуль).
  • Автор курса отвечает на ваши вопросы в комментариях под видео.

Программа курса

загружаем...
Certificate

Сертификат

Сертификат Stepik

Что вы получаете

  • Поддержка от автора курса (ответы на ваши вопросы в комментариях под видеоуроками)
  • Крутой проект в портфолио
  • Актуальные знания по современному HTML, CSS и JavaScript
  • Умение работать с JSX-синтаксисом (особенно важен тем, кто планирует дальше изучать React)
  • Практика с Sass, БЭМ, Figma, NPM, Vite, фреймворком Minista

Сколько стоит обучение

Price: 1 999 
Попробовать бесплатно
Вы попробовали и поняли, что вам сейчас не подходит этот курс? Ничего страшного, мы вернём вам деньги в течение 30-ти дней после покупки.

Часто задаваемые вопросы

Расскажите о курсе друзьям

Price: 1 999