Курс на Stepik
Обложка курса «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop» на Stepik
3 590₽ -17%
--:--:--
2 990 ₽

Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop ★ 4.841

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

Этот курс сделает вас настоящим "PRO" верстальщиком веб сайтов! Освойте современные методы создания CSS анимаций, работу с GRID CSS и продвинутые методы адаптации сайтов. Бонус: работа с Git и NPM

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop»Учеников на курсе 1 519
Сертификаты, выданные на курсе «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop»Сертификатов выдано 260
Отзывы о курсе «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop»Отзывов получено 44
Рейтинг курса «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop»Рейтинг курса 4.841
Уроки в курсе «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop»Количество уроков 132
Тесты в курсе «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop»Количество квизов 1
Время прохождения курса «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop»Время прохождения курса —
Стоимость курса «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop»Стоимость курса 3 590 ₽ —
Обновления курса «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop»Обновления курса — —
Дата публикации курса «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop»Дата публикации курса — ———
Последнее обновление курса «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop»Последнее обновление — ———
Сложность normal — ———

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

Разделы в курсе «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop» 9 разделов Уроки в курсе «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop» 132 урока Тесты в курсе «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop» 1 тест Время прохождения курса «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop» 20 ч. Последнее обновление курса «Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop» обн. 17 мая 2026

1. Подготовка / Повторение / Первые анимации

13 уроков
Закрытый
1.1 Привет!) Скачиваем материалы к курсу ↗
1 013
724
4м 3с
91
Закрытый
1.2 Оставайтесь со мной на связи! ↗
15
15
0м 12с
0
Открытый
1.3 Устанавливаем и настраиваем необходимое программное обеспечение ↗
2 169
2 169
17м 47с
78
Открытый
1.4 Новое свойство clip-path. Начинаем создавать первую секцию сайта ↗
1 299
1 299
28м 36с
77
Закрытый
1.5 Если у вас не работает scout-app ↗
604
604
7м 38с
46
Закрытый
1.6 Практика: Создайте свою фигуру с помощью Clip-path ↗
598
598
1м 2с
47
Закрытый
1.7 Выравнивание элементов по вертикали абсолютным позиционированием ↗
586
586
25м 29с
55
Закрытый
1.8 Знакомство с @KeyFrames. Создаем первую анимацию. ↗
574
574
10м 9с
64
Закрытый
1.9 Backface-visibility и создание кнопок через псевдо-классы ↗
559
559
14м 52с
51
Закрытый
1.10 Анимируем кнопку с помощью псевдо-элементов ↗
553
553
9м 0с
62
Закрытый
1.11 Animation-fill-mode. Запуск анимации из определенной точки. ↗
545
545
7м 4с
56
Закрытый
1.12 3 принципа веб разработки ↗
550
550
11м 41с
61
Закрытый
1.13 Используйте REM вместо PX ↗
543
543
12м 12с
79

2. Git и GitHub

42 урока
Закрытый
2.1 О чем этот блок ↗
562
562
2м 51с
63
Закрытый
2.2 Базовые команды в терминале ↗
525
111
13м 59с
61
Закрытый
2.3 Как редактировать файлы через терминал ↗
471
471
5м 0с
36
Закрытый
2.4 Устанавливаем систему git на наш компьютер ↗
464
464
4м 36с
44
Закрытый
2.5 Как запустить гит в определенном проекте ↗
461
461
9м 55с
43
Закрытый
2.6 Создаем первый коммит ↗
443
443
6м 18с
47
Закрытый
2.7 Отправка проекта GitHub ↗
433
433
14м 57с
53
Закрытый
2.8 Если у вас ошибка при отправке вашего проекта на GitHub ↗
401
401
8м 16с
39
Закрытый
2.9 Ошибка с логином при попытке отправить проект на GitHub ↗
380
380
8м 6с
35
Закрытый
2.10 Практика: создайте собственный репозиторий ↗
381
381
1м 16с
34
Закрытый
2.11 Как удалить репозиторий GitHub ↗
367
367
1м 58с
35
Закрытый
2.12 Как скачивать репозитории из GitHub ↗
333
333
7м 8с
29
Закрытый
2.13 Эмулируем работу 2-х разработчиков на одном репозитории ↗
288
288
9м 31с
21
Закрытый
2.14 Как вывести информацию о коммитах в терминал. Git log ↗
269
269
5м 34с
24
Закрытый
2.15 Что такое ветки ↗
259
259
4м 15с
23
Закрытый
2.16 Как создавать ветки и перемещаться по ним. ↗
251
251
10м 30с
22
Закрытый
2.17 Закрываем пробел из начала мини курса с обозначениями -u и -M ↗
247
247
5м 12с
20
Закрытый
2.18 Ошибка не сохраненного коммита при checkout ↗
230
230
12м 48с
22
Закрытый
2.19 Как перекинуть созданные изменения на новую ветку ↗
222
222
3м 27с
17
Закрытый
2.20 Как перекинуть несколько коммитов на новую ветку ↗
218
218
6м 1с
17
Закрытый
2.21 Что такое состояние открепленной головы. Detached HEAD ↗
204
204
5м 53с
15
Закрытый
2.22 Как восстановить конкретный файл из прошлого коммита ↗
200
200
7м 13с
13
Закрытый
2.23 Продвинутый git log и git show ↗
190
190
6м 41с
13
Закрытый
2.24 Как объединять ветки с помощью Git merge. Способ Fast-forward ↗
183
183
5м 55с
13
Закрытый
2.25 Как удалять ветки ↗
173
173
4м 54с
13
Закрытый
2.26 Как удалить файлы директории из состояния untracked ↗
170
170
4м 29с
15
Закрытый
2.27 Git reset --hard. Способ жесткого отката к коммиту ↗
166
166
3м 24с
12
Закрытый
2.28 Второй способ найти подвисший коммит с помощью ORIG_HEAD ↗
160
160
2м 23с
11
Закрытый
2.29 Git reset --soft ↗
156
156
4м 11с
15
Закрытый
2.30 Git commit --amend изменение комментария прошлого коммита ↗
155
155
2м 0с
10
Закрытый
2.31 Git reset --mixed ↗
154
154
3м 46с
11
Закрытый
2.32 Разница git reset и git restore ↗
156
156
3м 39с
12
Закрытый
2.33 Введение в git diff. Вывод разницы нескольких коммитов в консоль ↗
150
150
8м 57с
14
Закрытый
2.34 Практический пример применения git diff ↗
151
151
6м 1с
10
Закрытый
2.35 Как вывести схему веток в терминал. Git log --graph ↗
147
147
6м 2с
11
Закрытый
2.36 Объединяем ветки с помощью git merge. Способ "Истинное слияние" ↗
150
150
12м 1с
13
Закрытый
2.37 Как откатиться назад после слияния ↗
146
146
3м 7с
11
Закрытый
2.38 Как скопировать определенный коммит с помощью git cherry-pick ↗
141
141
7м 42с
10
Закрытый
2.39 Слияние веток с помощью git rebase ↗
151
151
7м 22с
9
Закрытый
2.40 Что лучше git rebase или git merge ↗
151
151
7м 1с
11
Закрытый
2.41 Как использовать файл .gitignore ↗
158
158
8м 43с
11
Закрытый
2.42 Заключительное слово ↗
176
176
3м 18с
20

3. Продвинутая верстка - CSS/SASS

27 уроков
Закрытый
3.1 О чем этот блок ↗
514
514
2м 12с
47
Закрытый
3.2 Как работают SASS переменные ↗
502
502
10м 46с
41
Закрытый
3.3 Как работают миксины ↗
490
490
4м 4с
39
Закрытый
3.4 Как добавлять аргументы для миксинов ↗
483
483
5м 6с
44
Закрытый
3.5 Что такое шаблоны SASS ↗
480
480
10м 43с
42
Закрытый
3.6 Как работают SASS функции ↗
473
473
10м 21с
47
Закрытый
3.7 Организация файлов SASS большого проекта ↗
469
469
13м 44с
49
Закрытый
3.8 3 способа позиционирования элементов ↗
473
473
5м 53с
42
Закрытый
3.9 Как работает float ↗
468
468
12м 49с
42
Закрытый
3.10 Создаем собственную систему grid ↗
464
464
27м 35с
44
Закрытый
3.11 Применение градиента к тексту. Backgroud-clip ↗
445
445
22м 15с
44
Закрытый
3.12 Как создавать символы с помощью HTML ↗
434
434
18м 1с
43
Закрытый
3.13 Анимируем и доделываем вторую секцию ↗
421
421
18м 39с
50
Закрытый
3.14 Как создавать собственные иконочные шрифты ↗
409
409
21м 22с
42
Закрытый
3.15 Используем свойство perspective для отражения перспективы элемен ↗
398
398
15м 28с
47
Закрытый
3.16 Как работает blending mode в CSS ↗
387
387
22м 29с
41
Закрытый
3.17 Доделываем секцию с карточками ↗
384
384
12м 47с
45
Закрытый
3.18 Как закруглить текст с помощью свойства shape-outside ↗
373
373
16м 52с
47
Закрытый
3.19 Как работают CSS фильтры ↗
371
371
8м 18с
41
Закрытый
3.20 Как добавить видео на страницу ↗
374
374
14м 6с
40
Закрытый
3.21 Знакомимся с тегом form и его содержимым ↗
367
367
19м 34с
40
Закрытый
3.22 Анимируем форму ↗
364
364
13м 25с
47
Закрытый
3.23 Делаем собственные radio button с помощью CSS ↗
354
354
19м 23с
44
Закрытый
3.24 Создаем footer сайта ↗
345
345
10м 55с
40
Закрытый
3.25 Создаем навигационное меню на чистом CSS ч.-1 ↗
354
354
19м 17с
42
Закрытый
3.26 Настраиваем переходы скорости анимаций, с помощью cubic-bezier ↗
345
345
7м 5с
37
Закрытый
3.27 Анимируем гамбургер ↗
355
355
10м 54с
45

4. Adaptive design

11 уроков
Закрытый
4.1 О чем этот блок ↗
372
372
1м 0с
39
Закрытый
4.2 Как создают адаптивные сайты ↗
382
382
9м 6с
37
Закрытый
4.3 Создаем миксин с медиа правилами ↗
363
363
14м 45с
39
Закрытый
4.4 Адаптация проекта ч.1 ↗
346
346
16м 41с
31
Закрытый
4.5 Адаптация проекта ч.2 ↗
318
318
19м 56с
36
Закрытый
4.6 Адаптация проекта ч.3 ↗
310
310
13м 40с
31
Закрытый
4.7 Что такое адаптивные изображения ↗
317
317
4м 30с
33
Закрытый
4.8 Как адаптировать изображения в HTML ↗
315
315
17м 28с
33
Закрытый
4.9 Адаптируем HTML изображения в нашем проекте ↗
298
298
12м 55с
26
Закрытый
4.10 Адаптация CSS изображений ↗
294
294
9м 59с
27
Закрытый
4.11 Несколько финальных правок сайта ↗
299
299
7м 58с
36

5. Node package manager

6 уроков
Закрытый
5.1 О чем этот блок ↗
361
361
1м 20с
27
Закрытый
5.2 Что такое node.js и npm ↗
356
356
8м 46с
28
Закрытый
5.3 Готовим к использованию первый npm пакет ↗
328
328
10м 42с
30
Закрытый
5.4 Запускаем первый npm пакет ↗
313
313
8м 27с
26
Закрытый
5.5 Используем gulp в нашем проекте ↗
318
318
26м 41с
39
Закрытый
5.6 Как открыть сайт на мобильном телефоне ↗
305
305
4м 48с
33

6. Введение в CSS GRID

16 уроков
Закрытый
6.1 О чем этот блок ↗
349
349
2м 46с
45
Закрытый
6.2 Подготовка ↗
341
341
4м 26с
28
Закрытый
6.3 Как создать шаблон сетки. Grid template ↗
341
341
9м 42с
34
Закрытый
6.4 Как работают единицы измерения fr ↗
319
319
7м 49с
34
Закрытый
6.5 Как переместить элемент в другую ячейку ↗
316
316
8м 58с
27
Закрытый
6.6 Размещение нескольких элементов в одной ячейки ↗
318
318
9м 46с
33
Закрытый
6.7 Практика: Создайте layout сайта ↗
312
312
1м 0с
27
Закрытый
6.8 Пример преподавателя. Создаем layout ↗
306
306
8м 44с
33
Закрытый
6.9 Как переименовать каждую линию в сетке grid ↗
306
306
8м 8с
32
Закрытый
6.10 Как создать шаблон сетки с помощью схемы имен ↗
305
305
8м 4с
41
Закрытый
6.11 Что такое явные и не явные гриды ↗
298
298
7м 24с
30
Закрытый
6.12 Как выравнивать элементы внутри ячеек ↗
299
299
5м 47с
31
Закрытый
6.13 Как выравнивать сетку внутри контейнера ↗
298
298
6м 34с
39
Закрытый
6.14 Min-Max content ↗
297
297
11м 41с
34
Закрытый
6.15 Auto-fill и Auto-fit. Размеры ячеек исходя из контента ↗
295
295
8м 38с
37
Закрытый
6.16 Заключение. Grid garden ↗
298
298
1м 6с
33

7. GRID CSS Project

15 уроков
Закрытый
7.1 О чем этот блок ↗
327
327
1м 4с
35
Закрытый
7.2 Подготовка ↗
318
318
6м 23с
28
Закрытый
7.3 Создаем шаблон grid сетки ч.1 ↗
303
303
10м 15с
31
Закрытый
7.4 Создаем шаблон grid сетки ч.2 ↗
291
291
20м 47с
36
Закрытый
7.5 Как работают SVG спрайты ↗
287
287
17м 13с
33
Закрытый
7.6 Доделываем вторую секцию сайта ↗
276
276
11м 5с
35
Закрытый
7.7 Создаем секцию "Баннер" ч.1 ↗
278
278
11м 13с
31
Закрытый
7.8 Создаем секцию "Баннер" ч.2 ↗
273
273
7м 22с
31
Закрытый
7.9 Создаем секцию с карточками ↗
271
271
20м 11с
30
Закрытый
7.10 Создаем галерею ↗
276
276
12м 30с
27
Закрытый
7.11 Создаем footer ↗
267
267
9м 6с
25
Закрытый
7.12 Делаем "Гамбургер" ↗
293
293
4м 33с
21
Закрытый
7.13 Создаем header ч.1 ↗
273
273
14м 30с
29
Закрытый
7.14 Создаем header ч.2 ↗
260
260
7м 20с
23
Закрытый
7.15 Адаптируем сайт ↗
316
316
18м 17с
31

8. До новых встреч!

1 урок
Закрытый
8.1 До свидания! ↗
269
269
3м 44с
61

9. Получите ваш сертификат

1 урок
Закрытый
9.1 Тест для получения сертификата об окончании курса ↗
371
264
0м 21с
23