Курс на Stepik
Обложка курса «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ» на Stepik
1 999 ₽

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

Открыть на
STEPIK.ORG

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

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ»Учеников на курсе 879
Сертификаты, выданные на курсе «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ»Сертификатов выдано 142
Отзывы о курсе «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ»Отзывов получено 48
Рейтинг курса «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ»Рейтинг курса 5.000
Уроки в курсе «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ»Количество уроков 58
Тесты в курсе «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ»Количество квизов 1
Время прохождения курса «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ»Время прохождения курса —
Стоимость курса «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ»Стоимость курса 1 999 ₽ —
Обновления курса «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ»Обновления курса — —
Дата публикации курса «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ»Дата публикации курса — ———
Последнее обновление курса «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ»Последнее обновление — ———
Сложность normal — ———

Содержание курса

Разделы в курсе «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ» 9 разделов Уроки в курсе «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ» 58 уроков Тесты в курсе «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ» 1 тест Время прохождения курса «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ» 16 ч. Последнее обновление курса «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ» обн. 1 год назад

Введение, подготовка папок и файлов

16 уроков
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 — настройка глобальной обертки каждой из страниц ↗
16. Настройка шаблона в WebStorm для быстрого создания компонентов ↗

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

8 уроков
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 (доработка) ↗

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

13 уроков
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

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

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

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

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

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

Страница Support

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

Страница Subscriptions

1 урок
1. Секция PlansComparison — компонент Table (2 шага) ↗

Финал

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