Курс на Stepik
Обложка курса «Верстаем 10 сайтов по макету из Figma в портфолио» на Stepik
1 490₽ -15%
--:--:--
1 266 ₽

Верстаем 10 сайтов по макету из Figma в портфолио ★ 5.000

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

Освойте самое важное для веб-разработчика и начните зарабатывать на этом деньги! HTML, CSS, Figma, Photoshop, VS Code, Emmet, BEM, Git, GitHub. Сверстаем более 10-ти сайтов по макету из Figma и Pixso в ваше портфолио. И расскажу как взять свой первый заказ на фриланс бирже.

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Верстаем 10 сайтов по макету из Figma в портфолио»Учеников на курсе 141
Сертификаты, выданные на курсе «Верстаем 10 сайтов по макету из Figma в портфолио»Сертификатов выдано 19
Отзывы о курсе «Верстаем 10 сайтов по макету из Figma в портфолио»Отзывов получено 1
Рейтинг курса «Верстаем 10 сайтов по макету из Figma в портфолио»Рейтинг курса 5.000
Уроки в курсе «Верстаем 10 сайтов по макету из Figma в портфолио»Количество уроков 89
Тесты в курсе «Верстаем 10 сайтов по макету из Figma в портфолио»Количество квизов 227
Время прохождения курса «Верстаем 10 сайтов по макету из Figma в портфолио»Время прохождения курса —
Стоимость курса «Верстаем 10 сайтов по макету из Figma в портфолио»Стоимость курса 1 490 ₽ —
Обновления курса «Верстаем 10 сайтов по макету из Figma в портфолио»Обновления курса — —
Дата публикации курса «Верстаем 10 сайтов по макету из Figma в портфолио»Дата публикации курса — ———
Последнее обновление курса «Верстаем 10 сайтов по макету из Figma в портфолио»Последнее обновление — ———
Сложность easy — ———

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

Разделы в курсе «Верстаем 10 сайтов по макету из Figma в портфолио» 9 разделов Уроки в курсе «Верстаем 10 сайтов по макету из Figma в портфолио» 89 уроков Тесты в курсе «Верстаем 10 сайтов по макету из Figma в портфолио» 227 тестов Время прохождения курса «Верстаем 10 сайтов по макету из Figma в портфолио» 31 ч. Последнее обновление курса «Верстаем 10 сайтов по макету из Figma в портфолио» обн. 9 января 2026

1. Язык HTML

13 уроков
Открытый
1.1 Введение ↗
450
148
4м 2с
7
Закрытый
1.2 Установка браузера и редактора кода ↗
113
97
10м 33с
3
Закрытый
1.3 Обзор функций редактора ↗
106
96
11м 4с
1
Закрытый
1.4 Первые HTML теги ↗
103
90
12м 44с
2
Закрытый
1.5 Как задавать путь к файлу ↗
94
85
10м 26с
1
Закрытый
1.6 Создание списка ↗
92
85
8м 1с
35
Закрытый
1.7 Создание таблиц ↗
92
81
6м 59с
28
Закрытый
1.8 Работа с текстом ↗
84
76
13м 5с
1
Закрытый
1.9 Создание формы ↗
81
77
9м 52с
4
Закрытый
1.10 Универсальные атрибуты ↗
80
77
4м 4с
22
Закрытый
1.11 Цвет RGB и спецсимволы ↗
79
76
10м 25с
1
Закрытый
1.12 Тест по HTML, Часть 1 ↗
83
78
5м 55с
13
Закрытый
1.13 Подведение итогов изучения HTML ↗
80
77
4м 35с
1

2. Язык CSS

10 уроков
Открытый
2.1 CSS селекторы ↗
274
90
11м 40с
3
Закрытый
2.2 Работа с изображениями ↗
82
77
6м 48с
24
Закрытый
2.3 Границы ↗
79
76
7м 50с
3
Закрытый
2.4 Размеры элементов ↗
79
76
6м 21с
3
Закрытый
2.5 Работа с шрифтом ↗
79
74
12м 21с
2
Закрытый
2.6 Блочная модель документа ↗
79
75
11м 39с
2
Закрытый
2.7 Псевдоклассы и псевдоэлементы ↗
78
75
15м 32с
1
Закрытый
2.8 Основы CSS Flexbox ↗
81
73
12м 45с
3
Закрытый
2.9 Тест по CSS, Часть 1 ↗
77
71
6м 5с
0
Закрытый
2.10 Адаптивная версия сайта, Создание своей сетки ↗
78
60
46м 21с
9

3. Практика по HTML и CSS

9 уроков
Открытый
3.1 Практическое занятие 1 ↗
356
91
14м 17с
7
Закрытый
3.2 Практическое занятие 2 ↗
70
55
15м 13с
3
Закрытый
3.3 Практическое занятие 3 ↗
65
49
9м 3с
2
Закрытый
3.4 Урок по Photoshop ↗
61
46
13м 57с
15
Закрытый
3.5 Практическое занятие 4 ↗
60
45
27м 52с
1
Закрытый
3.6 Заключение ↗
54
45
2м 59с
12
Закрытый
3.7 Тест по HTML, Часть 2 ↗
59
45
4м 18с
1
Закрытый
3.8 Тест по CSS, Часть 2 ↗
50
43
5м 26с
1
Закрытый
3.9 Справочники и ссылки ↗
56
43
2м 36с
1

4. Работа с Git и GitHub

19 уроков
Открытый
4.1 Что такое Git ↗
92
34
2м 7с
1
Открытый
4.2 Установка Git ↗
66
25
16м 17с
5
Открытый
4.3 Регистрация на GitHub ↗
69
28
6м 37с
2
Открытый
4.4 Первые команды Git ↗
67
25
14м 50с
1
Закрытый
4.5 Работа с Git в VS Code ↗
25
16
12м 45с
2
Закрытый
4.6 Удаление репозитория ↗
20
17
2м 18с
2
Закрытый
4.7 Клонирование ↗
19
17
10м 15с
2
Закрытый
4.8 Расширение Git Graph ↗
20
17
14м 28с
1
Закрытый
4.9 Алиасы для Git ↗
19
16
12м 32с
2
Закрытый
4.10 Отмена изменений ↗
19
14
16м 41с
2
Закрытый
4.11 Работа с ветками ↗
16
13
33м 48с
25
Закрытый
4.12 Слияние веток Git ↗
16
13
14м 14с
34
Закрытый
4.13 Синтаксис Markdown ↗
16
13
18м 19с
23
Закрытый
4.14 Фрагменты кода Gist ↗
15
13
11м 12с
22
Закрытый
4.15 Хостинг GitHub Pages ↗
21
13
6м 10с
25
Закрытый
4.16 Портфолио на GitHub ↗
21
13
9м 41с
22
Закрытый
4.17 Fork и Pull Request ↗
16
12
13м 55с
22
Закрытый
4.18 Файл .gitignore ↗
14
12
6м 31с
0
Закрытый
4.19 Итоги модуля ↗
14
13
3м 15с
1

5. Верстка сайта из Figma

7 уроков
Открытый
5.1 Работа с Figma и создание проекта ↗
293
32
75м 14с
3
Закрытый
5.2 Про Pixel Perfect и верстка Grid + Flexbox ↗
47
25
109м 43с
4
Закрытый
5.3 Верстаем несколько разделов сайта ↗
43
26
83м 18с
1
Закрытый
5.4 Пара слов о работе верстальщика ↗
39
19
95м 17с
2
Закрытый
5.5 Интерактивные элементы на сайте ↗
34
21
80м 29с
2
Закрытый
5.6 Домашнее задание по верстке сайта ↗
34
26
13м 42с
1
Закрытый
5.7 Фриланс: как взять заказ ↗
44
22
23м 23с
2

6. Полезные материалы

7 уроков
Открытый
6.1 Редакторы кода, иконки и Emmet ↗
178
20
109м 44с
4
Закрытый
6.2 CSS Grid и другие возможности ↗
33
13
63м 5с
3
Закрытый
6.3 Позиционирование, размеры и блочная модель ↗
31
19
59м 51с
1
Закрытый
6.4 БЭМ и как называть классы в HTML ↗
35
14
24м 49с
1
Закрытый
6.5 margin или padding что лучше использовать ↗
30
21
18м 2с
0
Закрытый
6.6 Выравнивание по центру и анимация ↗
30
15
28м 6с
2
Закрытый
6.7 Переменные root и функция calc ↗
28
17
16м 5с
0

7. 7 сайтов в портфолио

7 уроков
Открытый
7.1 Сайт 1 - Konstruct ↗
1 768
9
81м 0с
8
Закрытый
7.2 Сайт 2 - Alivio ↗
43
14
32м 23с
0
Закрытый
7.3 Сайт 3 - WD ↗
37
13
32м 4с
0
Закрытый
7.4 Сайт 4 - Britlex ↗
35
11
42м 10с
0
Закрытый
7.5 Сайт 5 - Archi Web ↗
32
10
43м 42с
0
Закрытый
7.6 Сайт 6 - Cloud Budget ↗
30
10
21м 22с
0
Закрытый
7.7 Сайт 7 - Dae ↗
32
8
3м 58с
0

8. Верстка сайта из Figma

9 уроков
Закрытый
8.1 Структура проекта ↗
19
9
9м 46с
2
Закрытый
8.2 Обзор макета ↗
17
7
9м 38с
1
Закрытый
8.3 Работа с Perfect Pixel ↗
12
6
10м 15с
1
Закрытый
8.4 Адаптивная версия ↗
13
6
11м 33с
1
Закрытый
8.5 Экспорт SVG ↗
11
6
12м 1с
2
Закрытый
8.6 Верстаем раздел ↗
10
6
15м 5с
1
Закрытый
8.7 Тень блока вручную ↗
11
5
23м 55с
2
Закрытый
8.8 Публикуем код ↗
10
5
7м 52с
3
Закрытый
8.9 Плагин Inspect Styles ↗
11
4
48м 40с
4

9. Верстка сайта из Pixso

8 уроков
Закрытый
9.1 Знакомство с Pixso ↗
16
8
9м 59с
4
Закрытый
9.2 Работа с SVG ↗
14
4
27м 17с
2
Закрытый
9.3 Шрифты Google Fonts ↗
7
3
10м 6с
2
Закрытый
9.4 Perfect Pixel в браузере ↗
8
3
10м 59с
0
Закрытый
9.5 Раздел сайта Features ↗
10
3
15м 33с
1
Закрытый
9.6 Раздел сайта Stats ↗
8
3
28м 22с
0
Закрытый
9.7 Раздел сайта Blog ↗
9
3
39м 49с
1
Закрытый
9.8 Домашнее задание ↗
11
3
1м 56с
1