Курс на 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, БЭМ»Учеников на курсе 846
Сертификаты, выданные на курсе «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ»Сертификатов выдано 129
Отзывы о курсе «Вёрстка сайта с нуля • JSX, SCSS, JS, Vite, Minista, БЭМ»Отзывов получено 45
Рейтинг курса «Вёрстка сайта с нуля • 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 год назад

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

16 уроков
Закрытый
1.1 Введение. Что будет в мастер-классе. Что нужно знать ↗
732
732
2м 6с
83
Закрытый
1.2 Сборщик проектов Vite и фреймворк Minista ↗
688
688
2м 14с
62
Закрытый
1.3 Установка Minista и библиотек. Настройка сборщика проектов ↗
664
664
16м 58с
70
Закрытый
1.4 Подготовка структуры папок проекта ↗
615
615
4м 41с
46
Закрытый
1.5 Файлы constants.scss и functions.scss — Sass-константы и функции ↗
601
601
9м 19с
51
Закрытый
1.6 Файл mixins.scss — Sass-миксины ↗
581
581
8м 28с
48
Закрытый
1.7 Файл media.scss — Sass-миксины для медиавыражений ↗
563
563
5м 43с
43
Закрытый
1.8 Файл helpers/index.js, автоподключение через сборщик проектов ↗
550
550
8м 10с
45
Закрытый
1.9 Подключение нормализации стилей ↗
541
541
1м 27с
33
Закрытый
1.10 Подключение шрифтов ↗
540
540
4м 43с
34
Закрытый
1.11 Файл variables.scss — подготовка глобальных CSS-переменных ↗
533
533
10м 54с
36
Закрытый
1.12 Файл utils.scss — подготовка утилитарных классов ↗
529
529
4м 36с
42
Закрытый
1.13 Файл globals.scss — подготовка глобальных стилей ↗
517
517
11м 39с
48
Закрытый
1.14 Шаблонизатор разметки JSX. Знакомство с синтаксисом. Особенности ↗
518
518
22м 2с
54
Закрытый
1.15 Файл global.jsx — настройка глобальной обертки каждой из страниц ↗
513
513
17м 46с
49
Закрытый
1.16 Настройка шаблона в WebStorm для быстрого создания компонентов ↗
422
422
2м 24с
40

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

8 уроков
Открытый
2.1 Sticky эффект, применение scroll animation-timeline ↗
2 665
2 665
8м 7с
49
Закрытый
2.2 Компонент Logo, библиотека classNames ↗
476
476
10м 22с
31
Закрытый
2.3 Меню навигации, списки в JSX, метод массивов map ↗
457
457
15м 40с
36
Закрытый
2.4 Компоненты Button и Icon, SVG-спрайты ↗
440
370
31м 59с
40
Закрытый
2.5 Компонент BurgerButton ↗
399
399
6м 10с
27
Закрытый
2.6 Меню-оверлей, HTML-элемент dialog, display contents ↗
386
386
11м 51с
27
Закрытый
2.7 JavaScript-модуль OverlayMenu ↗
378
378
11м 45с
28
Закрытый
2.8 Футер страницы — компоненты Socials и Button (доработка) ↗
362
362
24м 47с
25

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

13 уроков
Закрытый
3.1 Секция Hero, доработка Header ↗
352
352
24м 4с
32
Закрытый
3.2 Секция Categories — компонент Section ↗
323
323
15м 50с
26
Закрытый
3.3 Секция Categories — компоненты CategoryCard и Image ↗
308
308
21м 28с
23
Закрытый
3.4 Секция Categories — компоненты Slider и SliderNavigation ↗
303
303
21м 10с
25
Закрытый
3.5 Секция Categories — JavaScript-модуль SliderCollection (2 шага) ↗
299
263
42м 7с
28
Закрытый
3.6 Секция Devices — компоненты Grid и DeviceCard ↗
275
275
20м 42с
23
Закрытый
3.7 Секция Questions — компонент AccordionGroup ↗
259
259
25м 23с
29
Закрытый
3.8 Секция Questions — компонент Accordion ↗
252
252
20м 39с
27
Закрытый
3.9 Секция Plans — компоненты PlanCard и Button (доработка) ↗
243
243
17м 51с
25
Закрытый
3.10 Секция Plans — компоненты Tabs и TabsNavigation ↗
245
245
24м 36с
24
Закрытый
3.11 Секция Plans — JavaScript-модуль TabsCollection (2 шага) ↗
234
208
37м 27с
36
Закрытый
3.12 Абстрактный класс BaseComponent, Proxy API, доработка Tabs ↗
223
223
9м 12с
22
Закрытый
3.13 Секция Banner, доработка Content ↗
220
220
17м 35с
21

4. Страница Movies

3 урока
Закрытый
4.1 Секция MoviesBanner — MovieBannerCard, Slider (2 шага) ↗
222
192
31м 9с
24
Закрытый
4.2 Секция Collections — компонент Badge (2 шага) ↗
199
173
33м 24с
20
Закрытый
4.3 Секция Collections — компоненты MovieCard и RatingView (3 шага) ↗
184
165
54м 32с
24

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

4 урока
Закрытый
5.1 Секция MovieBanner, доработка компонента MovieBannerCard ↗
176
176
9м 39с
13
Закрытый
5.2 Секция MovieDetails — компоненты PersonCard, ReviewCard (2 шага) ↗
159
151
26м 20с
14
Закрытый
5.3 Секция MovieDetails — компоненты Tags, Rating и PersonCard ↗
159
159
23м 26с
10
Закрытый
5.4 Секция MovieDetails — стилизация, Slider и SliderNavigation ↗
157
157
19м 36с
15

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

4 урока
Закрытый
6.1 Секция ShowBanner ↗
170
170
5м 45с
14
Закрытый
6.2 Секция MovieDetails — Seasons, AccordionGroup, Accordion ↗
155
155
24м 11с
16
Закрытый
6.3 Секция MovieDetails, компоненты Seasons и EpisodeCard (2 шага) ↗
150
139
26м 55с
15
Закрытый
6.4 Секция MovieDetails, JavaScript-модуль VideoPlayer ↗
153
153
9м 22с
11

7. Страница Support

6 уроков
Закрытый
7.1 Секция Support — компонент Field (2 шага) ↗
168
150
32м 40с
19
Закрытый
7.2 Секция Support — JavaScript-модуль InputMask ↗
159
159
6м 23с
17
Закрытый
7.3 Секция Support — компонент Checkbox ↗
153
153
12м 23с
14
Закрытый
7.4 Секция Support — компонент Select (разметка) ↗
151
151
20м 33с
12
Закрытый
7.5 Секция Support — компонент Select (стилизация) ↗
151
151
19м 47с
12
Закрытый
7.6 Секция Support — JavaSscript-модуль Select (2 шага) ↗
160
140
39м 31с
15

8. Страница Subscriptions

1 урок
Закрытый
8.1 Секция PlansComparison — компонент Table (2 шага) ↗
165
145
29м 16с
16

9. Финал

3 урока
Закрытый
9.1 Рефакторинг и исправление ошибок ↗
226
226
10м 54с
12
Закрытый
9.2 Сборка приложения ↗
250
250
3м 41с
10
Закрытый
9.3 Заключение ↗
260
118
2м 56с
30