Курс на Stepik
Обложка курса «Продвинутый фронтенд: компоненты лендинга» на Stepik
Бесплатно

Продвинутый фронтенд: компоненты лендинга ★ 5.000

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

В этом курсе мы реализуем нетривиальные компоненты лендинга которые часто возникают на практике. Расширим наше портфолио типовых решений и детально разберёмся в необходимой теории. Для каждой задачи будем искать оптимальное решение и сравнивать альтернативы. Используем чистый HTML, CSS, JS. Навыки и знания из этого курса останутся актуальными в течение всей карьеры, в отличие от преходящих фреймворков и инструментов.

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Продвинутый фронтенд: компоненты лендинга»Учеников на курсе 607
Сертификаты, выданные на курсе «Продвинутый фронтенд: компоненты лендинга»Сертификатов выдано 0
Отзывы о курсе «Продвинутый фронтенд: компоненты лендинга»Отзывов получено 3
Рейтинг курса «Продвинутый фронтенд: компоненты лендинга»Рейтинг курса 5.000
Уроки в курсе «Продвинутый фронтенд: компоненты лендинга»Количество уроков 20
Тесты в курсе «Продвинутый фронтенд: компоненты лендинга»Количество квизов 27
Время прохождения курса «Продвинутый фронтенд: компоненты лендинга»Время прохождения курса —
Обновления курса «Продвинутый фронтенд: компоненты лендинга»Обновления курса — —
Дата публикации курса «Продвинутый фронтенд: компоненты лендинга»Дата публикации курса — ———
Последнее обновление курса «Продвинутый фронтенд: компоненты лендинга»Последнее обновление — ———
Сложность normal — ———

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

Разделы в курсе «Продвинутый фронтенд: компоненты лендинга» 8 разделов Уроки в курсе «Продвинутый фронтенд: компоненты лендинга» 20 уроков Тесты в курсе «Продвинутый фронтенд: компоненты лендинга» 27 тестов Время прохождения курса «Продвинутый фронтенд: компоненты лендинга» 4 ч. Последнее обновление курса «Продвинутый фронтенд: компоненты лендинга» обн. 29 апреля 2026

1. Введение

1 урок
Закрытый
1.1 Конвенции ↗
483
483
0м 27с
1

2. Закругление усечённой сетки

3 урока
Закрытый
2.1 Контекст ↗
268
268
1м 56с
0
Закрытый
2.2 Теория: CSS псевдоклассы nth-* ↗
230
94
9м 19с
8
Закрытый
2.3 Мини-проект ↗
150
42
10м 29с
8

3. Эффект светового луча

3 урока
Закрытый
3.1 Контекст ↗
104
104
1м 23с
2
Закрытый
3.2 Теория: clip-path • CSS эффекты ↗
100
54
16м 30с
3
Закрытый
3.3 Мини-проект ↗
75
28
13м 19с
3

4. Закрепленное меню лендинга (подход 1)

3 урока
Закрытый
4.1 Контекст ↗
67
67
2м 37с
1
Закрытый
4.2 Теория: scroll • getBoundingClientRect ↗
62
32
11м 56с
3
Закрытый
4.3 Мини-проект ↗
53
27
13м 27с
2

5. Закреплённое меню лендинга (подход 2)

3 урока
Закрытый
5.1 Контекст ↗
54
54
1м 16с
2
Закрытый
5.2 Теория: Intersection Observer API ↗
54
24
14м 42с
3
Закрытый
5.3 Мини-проект ↗
42
23
9м 23с
1

6. Анимированные счетчики

3 урока
Закрытый
6.1 Контекст ↗
54
54
1м 7с
2
Закрытый
6.2 Теория: window.requestAnimationFrame ↗
54
31
10м 14с
2
Закрытый
6.3 Мини-проект ↗
44
24
20м 12с
1

7. Горизонтальные разделители

3 урока
Закрытый
7.1 Контекст ↗
48
48
1м 58с
0
Закрытый
7.2 Теория: CSS flexbox (grow, shrink, basis) ↗
44
30
30м 46с
1
Закрытый
7.3 Мини-проект ↗
41
22
40м 30с
0

8. Заключение

1 урок
Закрытый
8.1 Что дальше ↗
55
55
1м 22с
2