Содержание пакета (2 курса)
1. Веб-дизайн в Figma 2025. Основы UI/UX дизайна на практике 4.3
1. Знакомство с Figma. Простые инструменты
39 уроков
👁
9 291
👤
8 484
Закрытый
1.1
О чем этот модуль
↗
129
129
1м
4
Закрытый
1.2
Скорость видео
↗
437
437
1м
11
Закрытый
1.3
Скачать Figma и зарегистрироваться в программе
↗
409
110
2м
15
Закрытый
1.4
Структура файлов
↗
403
403
10м
13
Закрытый
1.5
Обзор интерфейса программы
↗
377
332
9м
18
Закрытый
1.6
Команды в Figma
↗
103
103
8м
5
Закрытый
1.7
Сохранение и передача файла
↗
361
361
8м
12
Закрытый
1.8
Горячие клавиши
↗
348
326
4м
16
Закрытый
1.9
Move tool, Scale tool
↗
343
343
7м
13
Закрытый
1.10
Выравнивание объектов
↗
339
339
8м
17
Закрытый
1.11
Прямоугольник
↗
332
332
8м
13
Закрытый
1.12
Математика в Figma
↗
97
97
3м
8
Закрытый
1.13
Работа с цветом
↗
89
89
7м
5
Закрытый
1.14
ПРАКТИКА Овал
↗
90
82
6м
5
Закрытый
1.15
Решение задачи по инструменту ARC
↗
87
10
7м
5
Закрытый
1.16
Полигон + Звезда
↗
316
316
3м
12
Закрытый
1.17
Обводка
↗
315
315
6м
14
Закрытый
1.18
Линия
↗
76
76
3м
3
Открытый
1.19
Заливка + градинет
↗
877
877
13м
13
Закрытый
1.20
ПРАКТИКА Заливка градиент обводка
↗
74
68
9м
4
Закрытый
1.21
Изображения
↗
306
275
11м
17
Закрытый
1.22
Эффекты
↗
297
297
6м
12
Закрытый
1.23
Экспорт
↗
257
257
7м
10
Закрытый
1.24
Маска
↗
291
291
7м
12
Закрытый
1.25
Перо
↗
284
247
18м
20
Закрытый
1.26
Инструмент "Текст"
↗
261
240
14м
13
Закрытый
1.27
Про PNG
↗
70
70
4м
5
Закрытый
1.28
Группа
↗
260
239
5м
13
Закрытый
1.29
Frame
↗
255
255
7м
12
Закрытый
1.30
Секция
↗
72
72
3м
6
Закрытый
1.31
Булевы группы
↗
261
261
3м
12
Закрытый
1.32
Направляющие и Линейка
↗
72
72
2м
4
Закрытый
1.33
Selection colors
↗
223
223
3м
10
Закрытый
1.34
Комьюнити
↗
255
59
6м
10
Закрытый
1.35
Плагины
↗
262
232
8м
15
Закрытый
1.36
ПРАКТИКА. Контрольные проекты
↗
76
62
3м
5
Закрытый
1.37
Решение задачи на работу с текстом
↗
67
67
13м
5
Закрытый
1.38
Решение задачи на работу с маской
↗
61
61
13м
6
Закрытый
1.39
Решение задачи на работу с эффектами наложения
↗
59
59
8м
3
2. Продвинутые инструменты Figma
22 урока
👁
6 192
👤
5 871
Закрытый
2.1
Стили. Цвет
↗
261
225
8м
12
Закрытый
2.2
ПРАКТИКА. Стили Текст
↗
65
65
5м
3
Закрытый
2.3
Стили. Эффект
↗
65
65
7м
3
Закрытый
2.4
Constraints (Ограничения/привязки) Часть 1
↗
245
34
11м
9
Закрытый
2.5
Constraints (Ограничения/привязки) Часть 2
↗
237
237
9м
9
Закрытый
2.6
Сетки. Часть 1
↗
245
245
7м
6
Закрытый
2.7
ПРАКТИКА. Работа с сетками и привязками Часть 1
↗
241
219
11м
18
Закрытый
2.8
ПРАКТИКА. Работа с сетками и привязками Часть 2
↗
60
24
8м
3
Закрытый
2.9
ПРАКТИКА. Работа с сетками и привязками Часть 3
↗
59
59
10м
4
Закрытый
2.10
Auto Layout
↗
220
220
4м
7
Открытый
2.11
Auto Layout. Базовые настройки
↗
3 091
3 091
12м
12
Закрытый
2.12
Auto Layout. Примеры использования
↗
56
56
11м
13
Закрытый
2.13
ПРАКТИКА. Auto Layout Сложный пример работы
↗
55
39
13м
4
Закрытый
2.14
ПРАКТИКА. Auto Layout делаем адаптив
↗
54
54
9м
2
Закрытый
2.15
ПРАКТИКА. Auto Layout Адаптив блока с карточками
↗
52
52
6м
2
Закрытый
2.16
Компоненты
↗
194
194
8м
6
Закрытый
2.17
Компоненты. Удобная организация
↗
184
184
4м
6
Закрытый
2.18
Компоненты. Свойства компонентов
↗
180
180
10м
8
Закрытый
2.19
Компоненты. Варианты компонентов
↗
177
177
10м
7
Закрытый
2.20
Переменные
↗
185
185
10м
10
Закрытый
2.21
Переменные. Зона видимости
↗
217
217
8м
9
Закрытый
2.22
ПРАКТИКА Переменные. Организация переменныех
↗
49
49
7м
5
3. Практика работы в Figma
13 уроков
👁
1 285
👤
1 175
Закрытый
3.1
Основа атомарного дизайна
↗
230
230
11м
12
Закрытый
3.2
Анализ проекта
↗
207
172
7м
11
Закрытый
3.3
Создание токенов. Текст
↗
188
158
9м
11
Закрытый
3.4
Создание токенов. Цвет
↗
173
152
11м
12
Закрытый
3.5
Создание атомов. Иконки
↗
166
142
8м
9
Закрытый
3.6
Создание молекул
↗
50
50
10м
1
Закрытый
3.7
Создание организмов. Хедер
↗
44
44
13м
2
Закрытый
3.8
ПРАКТИКА Создание организмов. Сайд Бар
↗
40
40
11м
2
Закрытый
3.9
Создание организмов. Виджет Юзера
↗
37
37
13м
2
Закрытый
3.10
ПРАКТИКА Создание организмов. Виджет Группа
↗
39
39
9м
2
Закрытый
3.11
Создание виджета. Пост
↗
36
36
14м
1
Закрытый
3.12
ПРАКТИКА Создание организмов Виджет Пост 2
↗
37
37
10м
1
Закрытый
3.13
Последний урок модуля
↗
38
38
4м
2
4. Теория Веб-Дизайна
20 уроков
👁
1 359
👤
1 282
Закрытый
4.1
Типографика Введение
↗
30
30
6м
1
Закрытый
4.2
Типографика. Урок 2
↗
23
23
8м
0
Закрытый
4.3
Типографика Душним
↗
21
21
4м
0
Закрытый
4.4
Типографика. Установка шрифтов
↗
17
14
7м
0
Закрытый
4.5
Типографика. Точки Управления
↗
18
18
18м
1
Закрытый
4.6
Типографика. Практика + ДЗ
↗
17
17
10м
0
Закрытый
4.7
ПРАКТИКА Типографика. Часть 1
↗
17
13
8м
1
Закрытый
4.8
ПРАКТИКА Типографика. Часть 2
↗
14
14
9м
0
Закрытый
4.9
ПРАКТИКА Типографика. Часть 3
↗
14
14
19м
0
Закрытый
4.10
ПРАКТИКА Типографика. Часть 4
↗
12
12
6м
1
Закрытый
4.11
ПРАКТИКА Типографика. Часть 5
↗
13
13
11м
1
Закрытый
4.12
Информационная иерархия в UI дизайне
↗
14
14
0м
0
Закрытый
4.13
Тест по типографике
↗
148
139
1м
3
Закрытый
4.14
Сетки и направляющие
↗
143
132
4м
10
Закрытый
4.15
Теория цвета
↗
150
137
3м
14
Закрытый
4.16
Где брать картинки для веб дизайна
↗
146
124
9м
8
Закрытый
4.17
Как подбирать картинки для проектов
↗
144
129
8м
11
Закрытый
4.18
Выравнивание объектов
↗
138
138
8м
10
Закрытый
4.19
Правило внутреннего и внешнего
↗
138
138
7м
15
Закрытый
4.20
Иерархия в веб дизайне
↗
142
142
8м
11
5. Практика. Создание дизайн концепции сайта(Шот)
2 урока
👁
318
👤
294
Закрытый
5.1
Что такое дизайн концепт
↗
160
160
7м
9
Закрытый
5.2
Практика создания дизайн концепта сайта
↗
158
134
36м
12
6. Практика. Создание Лендинга. Бюджет 650$
18 уроков
👁
2 166
👤
2 004
Закрытый
6.1
Техническое задание проекта(ТЗ)
↗
168
140
7м
11
Закрытый
6.2
UX Часть нашего проекта
↗
157
133
8м
7
Закрытый
6.3
Подробнее о брифах
↗
139
139
2м
5
Закрытый
6.4
Порядок выполнения проекта
↗
141
141
9м
4
Закрытый
6.5
Определение целевой аудитории
↗
130
130
6м
2
Закрытый
6.6
Аналитика конкурентов
↗
126
116
9м
2
Закрытый
6.7
Создание прототипа сайта. Теория
↗
136
121
3м
4
Закрытый
6.8
Создание прототипа сайта. Практика
↗
132
115
32м
5
Закрытый
6.9
Создание концепта сайта
↗
117
103
40м
4
Закрытый
6.10
Создаем блоки с информацией
↗
116
94
25м
6
Закрытый
6.11
Создаем блок тарифов, форму связи и футер
↗
104
104
21м
3
Закрытый
6.12
Работа со слоями. Доработка дизайна.
↗
103
103
13м
2
Закрытый
6.13
Адаптив дизайна под планшет
↗
105
105
20м
3
Закрытый
6.14
Создание мобильной версии дизайна
↗
100
100
18м
2
Закрытый
6.15
Создание модальных окон + ДЗ
↗
99
99
13м
2
Закрытый
6.16
Готовим работу к верстке. Стайл Гайд + ДЗ
↗
101
101
5м
2
Закрытый
6.17
Этапы работы над проектом на фрилансе
↗
94
94
5м
5
Закрытый
6.18
Создание личного кабинета
↗
98
66
2м
1
7. Практика. Создания дизайна интернет магазина. Бюджет $1200
11 уроков
👁
890
👤
829
Закрытый
7.1
Получение ТЗ
↗
100
84
5м
2
Закрытый
7.2
Создание концепта интернет магазина
↗
95
80
14м
2
Закрытый
7.3
Создание основных блоков главной страницы
↗
85
69
24м
5
Закрытый
7.4
Создание рекламного баннера и формы подписки
↗
78
78
10м
2
Закрытый
7.5
Создание футера
↗
82
68
16м
2
Закрытый
7.6
Проверка дизайна главной
↗
77
77
5м
4
Закрытый
7.7
Страница выдачи товара
↗
76
76
30м
2
Закрытый
7.8
Создание страницы товара. Карточка товара
↗
74
74
38м
1
Закрытый
7.9
Создание модального окна
↗
75
75
9м
2
Закрытый
7.10
Создание корзины
↗
71
71
10м
2
Закрытый
7.11
Создаем страницу оплаты
↗
77
77
17м
2
8. Создание кликабельного макета.
2 урока
👁
164
👤
142
Закрытый
8.1
Введение в прототипирование в Figma
↗
83
83
27м
1
Закрытый
8.2
Создание кликабельного макета
↗
81
59
17м
2
9. Адаптивная версия дизайна интернет магазина
7 уроков
👁
443
👤
443
Закрытый
9.1
Адаптация главной
↗
79
79
31м
3
Закрытый
9.2
Адаптив страницы выдачи товаров
↗
62
62
12м
1
Закрытый
9.3
Адаптив карточки товара + ДЗ
↗
62
62
11м
1
Закрытый
9.4
Адаптив корзины
↗
58
58
7м
2
Закрытый
9.5
Адаптив страницы оплаты
↗
55
55
8м
2
Закрытый
9.6
Создаем открытое меню в мобильной версии сайта
↗
64
64
6м
1
Закрытый
9.7
Проверка на ошибки
↗
63
63
4м
2
10. Создание стайл гайда
1 урок
👁
94
👤
64
Закрытый
10.1
Создание стайл гайда
↗
94
64
4м
2
11. Оформление работ в портфолио
3 урока
👁
256
👤
216
Закрытый
11.1
Обзор кейсов
↗
93
68
6м
3
Закрытый
11.2
Оформление кейса по лендингу
↗
78
63
19м
2
Закрытый
11.3
Презентация кейса
↗
85
85
6м
2
12. Что делать дальше
2 урока
👁
214
👤
187
Закрытый
12.1
Где и как искать работу Веб дизайнеру
↗
116
116
7м
3
Закрытый
12.2
Не очевидные способы способы дохода для веб дизайнера
↗
98
71
13м
3
2. Верстка сайтов HTML CSS. Создание сайтов. Легкий уровень 4.5
1. Настройка рабочего пространства
6 уроков
👁
152
👤
133
Закрытый
1.1
Редактор Кода
↗
36
22
7м
0
Закрытый
1.2
Emmet
↗
24
24
0м
0
Закрытый
1.3
Видео на Stepik
↗
24
24
1м
0
Закрытый
1.4
Создаем проект
↗
24
24
5м
0
Закрытый
1.5
Горячие клавиши
↗
21
19
7м
1
Закрытый
1.6
.zip
↗
23
20
2м
1
2. Начальный Html. Создание первого сайта
18 уроков
👁
337
👤
328
Закрытый
2.1
Создание первого проекта
↗
23
23
4м
1
Закрытый
2.2
Семантика HTML
↗
23
23
6м
1
Открытый
2.3
Основные теги HTML
↗
31
31
5м
1
Закрытый
2.4
Заголовки и абзацы
↗
20
20
7м
0
Закрытый
2.5
Наполняем текстом проект
↗
19
16
2м
0
Закрытый
2.6
Работа со строками
↗
18
18
4м
0
Закрытый
2.7
Работа с изображениями
↗
18
18
7м
0
Открытый
2.8
Списки
↗
23
23
7м
2
Закрытый
2.9
Цитаты
↗
17
17
3м
0
Закрытый
2.10
Работа со ссылками
↗
16
16
7м
0
Закрытый
2.11
Создаем меню
↗
19
19
5м
0
Закрытый
2.12
Практика | Переходы по пунктам меню
↗
16
16
7м
1
Закрытый
2.13
Ответ на ДЗ
↗
17
17
2м
1
Закрытый
2.14
Сематические теги
↗
16
16
6м
0
Закрытый
2.15
Footer
↗
16
12
7м
0
Закрытый
2.16
Полная версия HTML
↗
14
14
5м
0
Закрытый
2.17
div span
↗
15
15
7м
0
Закрытый
2.18
Тест на закрепление материала по HTML
↗
16
14
1м
0
3. Введение в CSS
22 урока
👁
253
👤
237
Закрытый
3.1
Семантика CSS
↗
17
17
6м
1
Закрытый
3.2
Inline Style
↗
17
17
8м
0
Закрытый
3.3
Подключаем файл со стилями
↗
17
17
8м
0
Закрытый
3.4
Специфичность
↗
15
15
10м
1
Закрытый
3.5
Подключение изображений | Практика
↗
17
17
5м
0
Закрытый
3.6
Цвет и Фон
↗
12
10
13м
0
Закрытый
3.7
Инспектор
↗
12
12
11м
1
Закрытый
3.8
Удаленное подключение шрифтов
↗
13
9
18м
1
Закрытый
3.9
Локальное подключение шрифтов
↗
12
9
11м
1
Закрытый
3.10
Лекция о шрифтах как таковых
↗
11
11
10м
1
Закрытый
3.11
Единицы измерения
↗
9
9
12м
2
Закрытый
3.12
Позиционирование
↗
10
8
7м
1
Закрытый
3.13
Практика позиционирования
↗
10
10
14м
0
Закрытый
3.14
Марджин
↗
12
12
14м
0
Закрытый
3.15
box-sizing
↗
9
9
8м
1
Закрытый
3.16
Псевдоэлементы Часть 1
↗
9
8
8м
1
Закрытый
3.17
Псевдоэлементы Часть 2
↗
9
7
8м
2
Закрытый
3.18
Решение задачи
↗
8
8
7м
1
Закрытый
3.19
Псевдокласс
↗
9
7
9м
1
Закрытый
3.20
Решение задачи
↗
10
10
7м
1
Закрытый
3.21
Тест на закрепление материала по CSS
↗
8
8
1
Закрытый
3.22
Последний урок модуля
↗
7
7
0
4. Практика верстки проекта. Лендинг
34 урока
👁
228
👤
223
Закрытый
4.1
О Figma
↗
8
8
16м
1
Закрытый
4.2
Чтение макета
↗
11
11
4м
1
Закрытый
4.3
Создаем рабочую среду
↗
8
8
6м
0
Закрытый
4.4
Добавляем шрифты
↗
7
7
7м
1
Закрытый
4.5
Добавляем изображения
↗
8
8
8м
1
Закрытый
4.6
Верстаем Header Часть 1. Практика
↗
8
8
7м
1
Закрытый
4.7
Normalize
↗
7
7
4м
1
Закрытый
4.8
Верстаем Header Часть 2. Практика
↗
7
7
5м
0
Закрытый
4.9
Верстаем навигацию
↗
8
8
5м
0
Закрытый
4.10
Верстаем Header Часть 3. Практика
↗
9
9
4м
0
Закрытый
4.11
Верстаем Header Часть 4. Практика
↗
9
9
6м
0
Закрытый
4.12
Адаптив Header Часть 1
↗
7
7
9м
0
Закрытый
4.13
Адаптив Header Часть 2
↗
6
6
9м
1
Закрытый
4.14
Создаем бургер меню
↗
10
10
11м
1
Закрытый
4.15
Анимация бургера
↗
7
7
7м
1
Закрытый
4.16
Первое знакомство с JS
↗
8
5
12м
1
Закрытый
4.17
Последний штрих Header
↗
7
7
4м
1
Закрытый
4.18
Верстка блока Hero
↗
7
7
17м
1
Закрытый
4.19
Адаптив Hero
↗
7
7
8м
0
Закрытый
4.20
Секция Products
↗
7
7
8м
1
Закрытый
4.21
Секция Products Часть 2
↗
7
7
12м
1
Закрытый
4.22
Зачем мы это делаем?
↗
7
7
6м
1
Закрытый
4.23
Адаптив Products ДЗ
↗
7
7
10м
1
Закрытый
4.24
Объяснение ДЗ
↗
6
4
4м
0
Закрытый
4.25
Блок Category
↗
5
5
15м
1
Закрытый
4.26
Сниппеты
↗
5
5
13м
1
Закрытый
4.27
Формы на сайте
↗
4
4
11м
1
Закрытый
4.28
Блок History
↗
4
4
15м
1
Закрытый
4.29
Блок History Адаптация
↗
4
4
9м
1
Закрытый
4.30
Блок History Адаптация Часть 2
↗
5
5
6м
1
Закрытый
4.31
Footer HTML
↗
4
4
7м
0
Закрытый
4.32
Footer CSS
↗
5
5
12м
1
Закрытый
4.33
Footer адаптация. Знакомство с Grid
↗
5
5
9м
1
Закрытый
4.34
Последний урок в блоке
↗
4
4
0
5. Продвинутая верстка. Новый проект
50 уроков
👁
218
👤
210
Закрытый
5.1
Препроцессоры SASS SCSS
↗
7
4
11м
1
Закрытый
5.2
Плагин Live Sass Compiler
↗
6
6
9м
1
Закрытый
5.3
Настройка плагина Sass
↗
5
5
13м
1
Закрытый
5.4
NPM SASS
↗
4
4
11м
1
Закрытый
5.5
Переменные
↗
4
4
10м
1
Закрытый
5.6
Задача на работу с Sass
↗
5
5
3м
1
Закрытый
5.7
Решение задачи
↗
4
4
10м
1
Закрытый
5.8
Создаем проект
↗
4
3
7м
1
Закрытый
5.9
Подключение шрифтов через sass
↗
4
4
13м
1
Закрытый
5.10
Улучшаем структуру проекта
↗
4
4
9м
0
Закрытый
5.11
Добавляем переменные в проект
↗
4
4
8м
1
Закрытый
5.12
Верстаем Header. Часть 1
↗
3
3
11м
1
Закрытый
5.13
_reset.sass
↗
4
4
5м
1
Закрытый
5.14
Верстаем Header. Часть 2
↗
4
4
11м
1
Закрытый
5.15
БЭМ
↗
4
4
11м
1
Закрытый
5.16
Блок Hero HTML структура блока
↗
4
4
16м
1
Закрытый
5.17
Блок Hero Стилизируем блок
↗
4
4
14м
1
Закрытый
5.18
Блок Services HTML структура блока
↗
4
4
11м
1
Закрытый
5.19
Блок Services . Работаем с карточками
↗
4
4
6м
1
Закрытый
5.20
Блок Services Часть 2
↗
4
4
16м
0
Закрытый
5.21
Анимация кнопки в карточке
↗
4
4
5м
1
Закрытый
5.22
Практика | Добавление декора
↗
4
4
4м
1
Закрытый
5.23
Практика | Отзывы
↗
5
5
14м
1
Закрытый
5.24
Блок Story. Создаем HTML структуру
↗
4
4
8м
1
Закрытый
5.25
Блок Story Добавляем стили
↗
4
4
7м
1
Закрытый
5.26
Что такое Grid и как с ним работать
↗
3
3
15м
1
Закрытый
5.27
Углубление в сетки Grid
↗
4
4
8м
1
Закрытый
5.28
Добавляем Grid к блоку Story
↗
4
4
15м
1
Закрытый
5.29
Практика | Блок "Показатели"
↗
5
5
11м
1
Закрытый
5.30
Блок feauters. HTML часть
↗
4
4
8м
0
Закрытый
5.31
Блок Feauters Sass часть. Grid + Flex
↗
4
4
15м
1
Закрытый
5.32
Снова о Title
↗
4
4
2м
0
Закрытый
5.33
Добиваем альты
↗
4
4
2м
1
Закрытый
5.34
Блок CTA
↗
5
5
17м
1
Закрытый
5.35
Блок "Наши работы" HTML часть
↗
5
5
12м
1
Закрытый
5.36
Добавляем кнопку к блоку
↗
5
5
10м
1
Закрытый
5.37
Футер Часть 1
↗
5
5
15м
1
Закрытый
5.38
Футер СТА
↗
4
4
11м
1
Закрытый
5.39
Футер Стили
↗
4
4
15м
1
Закрытый
5.40
Футер Стили 2
↗
4
4
15м
1
Закрытый
5.41
Снова про H2
↗
4
4
8м
1
Закрытый
5.42
Sprite | Практика
↗
4
4
12м
1
Закрытый
5.43
Sprite 2
↗
5
5
7м
1
Закрытый
5.44
Наводим порядок в тегах
↗
5
5
12м
1
Закрытый
5.45
Проверка валидности верстки
↗
5
3
3м
1
Закрытый
5.46
Причесывание макета
↗
4
4
10м
1
Закрытый
5.47
Введение в Gulp
↗
5
3
13м
1
Закрытый
5.48
Описание работы Gulp
↗
4
4
12м
1
Закрытый
5.49
Решаем задачку по шрифтам
↗
6
6
7м
0
Закрытый
5.50
Последний урок модуля
↗
5
5
1
6. Хостинг. Как живут сайты в интернете
6 уроков
👁
29
👤
27
Закрытый
6.1
Что такое хостинг и домен
↗
5
5
12м
1
Закрытый
6.2
Регистрируем домен
↗
6
6
4м
1
Закрытый
6.3
Загружаем сайт на хостинг
↗
5
5
4м
1
Закрытый
6.4
Создаем суб домены
↗
5
3
8м
1
Закрытый
6.5
Практика | Первый сайт Портфолио
↗
4
4
4м
1
Закрытый
6.6
Добавляем работы в Портфель
↗
4
4
7м
1