Содержание пакета (2 курса)
2
курса
276
уроков
21
тест
42 ч.
1. Веб-дизайн в Figma 2025. Основы UI/UX дизайна на практике 4.30
634
140
11
23 ч.
Знакомство с Figma. Простые инструменты
39 уроков
1.
О чем этот модуль
↗
2.
Скорость видео
↗
3.
Скачать Figma и зарегистрироваться в программе
↗
4.
Структура файлов
↗
5.
Обзор интерфейса программы
↗
6.
Команды в Figma
↗
7.
Сохранение и передача файла
↗
8.
Горячие клавиши
↗
9.
Move tool, Scale tool
↗
10.
Выравнивание объектов
↗
11.
Прямоугольник
↗
12.
Математика в Figma
↗
13.
Работа с цветом
↗
14.
ПРАКТИКА Овал
↗
15.
Решение задачи по инструменту ARC
↗
16.
Полигон + Звезда
↗
17.
Обводка
↗
18.
Линия
↗
19.
Заливка + градинет
↗
20.
ПРАКТИКА Заливка градиент обводка
↗
21.
Изображения
↗
22.
Эффекты
↗
23.
Экспорт
↗
24.
Маска
↗
25.
Перо
↗
26.
Инструмент "Текст"
↗
27.
Про PNG
↗
28.
Группа
↗
29.
Frame
↗
30.
Секция
↗
31.
Булевы группы
↗
32.
Направляющие и Линейка
↗
33.
Selection colors
↗
34.
Комьюнити
↗
35.
Плагины
↗
36.
ПРАКТИКА. Контрольные проекты
↗
37.
Решение задачи на работу с текстом
↗
38.
Решение задачи на работу с маской
↗
39.
Решение задачи на работу с эффектами наложения
↗
Продвинутые инструменты Figma
22 урока
1.
Стили. Цвет
↗
2.
ПРАКТИКА. Стили Текст
↗
3.
Стили. Эффект
↗
4.
Constraints (Ограничения/привязки) Часть 1
↗
5.
Constraints (Ограничения/привязки) Часть 2
↗
6.
Сетки. Часть 1
↗
7.
ПРАКТИКА. Работа с сетками и привязками Часть 1
↗
8.
ПРАКТИКА. Работа с сетками и привязками Часть 2
↗
9.
ПРАКТИКА. Работа с сетками и привязками Часть 3
↗
10.
Auto Layout
↗
11.
Auto Layout. Базовые настройки
↗
12.
Auto Layout. Примеры использования
↗
13.
ПРАКТИКА. Auto Layout Сложный пример работы
↗
14.
ПРАКТИКА. Auto Layout делаем адаптив
↗
15.
ПРАКТИКА. Auto Layout Адаптив блока с карточками
↗
16.
Компоненты
↗
17.
Компоненты. Удобная организация
↗
18.
Компоненты. Свойства компонентов
↗
19.
Компоненты. Варианты компонентов
↗
20.
Переменные
↗
21.
Переменные. Зона видимости
↗
22.
ПРАКТИКА Переменные. Организация переменныех
↗
Практика работы в Figma
13 уроков
1.
Основа атомарного дизайна
↗
2.
Анализ проекта
↗
3.
Создание токенов. Текст
↗
4.
Создание токенов. Цвет
↗
5.
Создание атомов. Иконки
↗
6.
Создание молекул
↗
7.
Создание организмов. Хедер
↗
8.
ПРАКТИКА Создание организмов. Сайд Бар
↗
9.
Создание организмов. Виджет Юзера
↗
10.
ПРАКТИКА Создание организмов. Виджет Группа
↗
11.
Создание виджета. Пост
↗
12.
ПРАКТИКА Создание организмов Виджет Пост 2
↗
13.
Последний урок модуля
↗
Теория Веб-Дизайна
20 уроков
1.
Типографика Введение
↗
2.
Типографика. Урок 2
↗
3.
Типографика Душним
↗
4.
Типографика. Установка шрифтов
↗
5.
Типографика. Точки Управления
↗
6.
Типографика. Практика + ДЗ
↗
7.
ПРАКТИКА Типографика. Часть 1
↗
8.
ПРАКТИКА Типографика. Часть 2
↗
9.
ПРАКТИКА Типографика. Часть 3
↗
10.
ПРАКТИКА Типографика. Часть 4
↗
11.
ПРАКТИКА Типографика. Часть 5
↗
12.
Информационная иерархия в UI дизайне
↗
13.
Тест по типографике
↗
14.
Сетки и направляющие
↗
15.
Теория цвета
↗
16.
Где брать картинки для веб дизайна
↗
17.
Как подбирать картинки для проектов
↗
18.
Выравнивание объектов
↗
19.
Правило внутреннего и внешнего
↗
20.
Иерархия в веб дизайне
↗
Практика. Создание дизайн концепции сайта(Шот)
2 урока
1.
Что такое дизайн концепт
↗
2.
Практика создания дизайн концепта сайта
↗
Практика. Создание Лендинга. Бюджет 650$
18 уроков
1.
Техническое задание проекта(ТЗ)
↗
2.
UX Часть нашего проекта
↗
3.
Подробнее о брифах
↗
4.
Порядок выполнения проекта
↗
5.
Определение целевой аудитории
↗
6.
Аналитика конкурентов
↗
7.
Создание прототипа сайта. Теория
↗
8.
Создание прототипа сайта. Практика
↗
9.
Создание концепта сайта
↗
10.
Создаем блоки с информацией
↗
11.
Создаем блок тарифов, форму связи и футер
↗
12.
Работа со слоями. Доработка дизайна.
↗
13.
Адаптив дизайна под планшет
↗
14.
Создание мобильной версии дизайна
↗
15.
Создание модальных окон + ДЗ
↗
16.
Готовим работу к верстке. Стайл Гайд + ДЗ
↗
17.
Этапы работы над проектом на фрилансе
↗
18.
Создание личного кабинета
↗
Практика. Создания дизайна интернет магазина. Бюджет $1200
11 уроков
1.
Получение ТЗ
↗
2.
Создание концепта интернет магазина
↗
3.
Создание основных блоков главной страницы
↗
4.
Создание рекламного баннера и формы подписки
↗
5.
Создание футера
↗
6.
Проверка дизайна главной
↗
7.
Страница выдачи товара
↗
8.
Создание страницы товара. Карточка товара
↗
9.
Создание модального окна
↗
10.
Создание корзины
↗
11.
Создаем страницу оплаты
↗
Создание кликабельного макета.
2 урока
1.
Введение в прототипирование в Figma
↗
2.
Создание кликабельного макета
↗
Адаптивная версия дизайна интернет магазина
7 уроков
1.
Адаптация главной
↗
2.
Адаптив страницы выдачи товаров
↗
3.
Адаптив карточки товара + ДЗ
↗
4.
Адаптив корзины
↗
5.
Адаптив страницы оплаты
↗
6.
Создаем открытое меню в мобильной версии сайта
↗
7.
Проверка на ошибки
↗
Создание стайл гайда
1 урок
1.
Создание стайл гайда
↗
Оформление работ в портфолио
3 урока
1.
Обзор кейсов
↗
2.
Оформление кейса по лендингу
↗
3.
Презентация кейса
↗
Что делать дальше
2 урока
1.
Где и как искать работу Веб дизайнеру
↗
2.
Не очевидные способы способы дохода для веб дизайнера
↗
2. Верстка сайтов HTML CSS. Создание сайтов. Легкий уровень 4.50
35
136
10
19 ч.
Настройка рабочего пространства
6 уроков
1.
Редактор Кода
↗
2.
Emmet
↗
3.
Видео на Stepik
↗
4.
Создаем проект
↗
5.
Горячие клавиши
↗
6.
.zip
↗
Начальный Html. Создание первого сайта
18 уроков
1.
Создание первого проекта
↗
2.
Семантика HTML
↗
3.
Основные теги HTML
↗
4.
Заголовки и абзацы
↗
5.
Наполняем текстом проект
↗
6.
Работа со строками
↗
7.
Работа с изображениями
↗
8.
Списки
↗
9.
Цитаты
↗
10.
Работа со ссылками
↗
11.
Создаем меню
↗
12.
Практика | Переходы по пунктам меню
↗
13.
Ответ на ДЗ
↗
14.
Сематические теги
↗
15.
Footer
↗
16.
Полная версия HTML
↗
17.
div span
↗
18.
Тест на закрепление материала по HTML
↗
Введение в CSS
22 урока
1.
Семантика CSS
↗
2.
Inline Style
↗
3.
Подключаем файл со стилями
↗
4.
Специфичность
↗
5.
Подключение изображений | Практика
↗
6.
Цвет и Фон
↗
7.
Инспектор
↗
8.
Удаленное подключение шрифтов
↗
9.
Локальное подключение шрифтов
↗
10.
Лекция о шрифтах как таковых
↗
11.
Единицы измерения
↗
12.
Позиционирование
↗
13.
Практика позиционирования
↗
14.
Марджин
↗
15.
box-sizing
↗
16.
Псевдоэлементы Часть 1
↗
17.
Псевдоэлементы Часть 2
↗
18.
Решение задачи
↗
19.
Псевдокласс
↗
20.
Решение задачи
↗
21.
Тест на закрепление материала по CSS
↗
22.
Последний урок модуля
↗
Практика верстки проекта. Лендинг
34 урока
1.
О Figma
↗
2.
Чтение макета
↗
3.
Создаем рабочую среду
↗
4.
Добавляем шрифты
↗
5.
Добавляем изображения
↗
6.
Верстаем Header Часть 1. Практика
↗
7.
Normalize
↗
8.
Верстаем Header Часть 2. Практика
↗
9.
Верстаем навигацию
↗
10.
Верстаем Header Часть 3. Практика
↗
11.
Верстаем Header Часть 4. Практика
↗
12.
Адаптив Header Часть 1
↗
13.
Адаптив Header Часть 2
↗
14.
Создаем бургер меню
↗
15.
Анимация бургера
↗
16.
Первое знакомство с JS
↗
17.
Последний штрих Header
↗
18.
Верстка блока Hero
↗
19.
Адаптив Hero
↗
20.
Секция Products
↗
21.
Секция Products Часть 2
↗
22.
Зачем мы это делаем?
↗
23.
Адаптив Products ДЗ
↗
24.
Объяснение ДЗ
↗
25.
Блок Category
↗
26.
Сниппеты
↗
27.
Формы на сайте
↗
28.
Блок History
↗
29.
Блок History Адаптация
↗
30.
Блок History Адаптация Часть 2
↗
31.
Footer HTML
↗
32.
Footer CSS
↗
33.
Footer адаптация. Знакомство с Grid
↗
34.
Последний урок в блоке
↗
Продвинутая верстка. Новый проект
50 уроков
1.
Препроцессоры SASS SCSS
↗
2.
Плагин Live Sass Compiler
↗
3.
Настройка плагина Sass
↗
4.
NPM SASS
↗
5.
Переменные
↗
6.
Задача на работу с Sass
↗
7.
Решение задачи
↗
8.
Создаем проект
↗
9.
Подключение шрифтов через sass
↗
10.
Улучшаем структуру проекта
↗
11.
Добавляем переменные в проект
↗
12.
Верстаем Header. Часть 1
↗
13.
_reset.sass
↗
14.
Верстаем Header. Часть 2
↗
15.
БЭМ
↗
16.
Блок Hero HTML структура блока
↗
17.
Блок Hero Стилизируем блок
↗
18.
Блок Services HTML структура блока
↗
19.
Блок Services . Работаем с карточками
↗
20.
Блок Services Часть 2
↗
21.
Анимация кнопки в карточке
↗
22.
Практика | Добавление декора
↗
23.
Практика | Отзывы
↗
24.
Блок Story. Создаем HTML структуру
↗
25.
Блок Story Добавляем стили
↗
26.
Что такое Grid и как с ним работать
↗
27.
Углубление в сетки Grid
↗
28.
Добавляем Grid к блоку Story
↗
29.
Практика | Блок "Показатели"
↗
30.
Блок feauters. HTML часть
↗
31.
Блок Feauters Sass часть. Grid + Flex
↗
32.
Снова о Title
↗
33.
Добиваем альты
↗
34.
Блок CTA
↗
35.
Блок "Наши работы" HTML часть
↗
36.
Добавляем кнопку к блоку
↗
37.
Футер Часть 1
↗
38.
Футер СТА
↗
39.
Футер Стили
↗
40.
Футер Стили 2
↗
41.
Снова про H2
↗
42.
Sprite | Практика
↗
43.
Sprite 2
↗
44.
Наводим порядок в тегах
↗
45.
Проверка валидности верстки
↗
46.
Причесывание макета
↗
47.
Введение в Gulp
↗
48.
Описание работы Gulp
↗
49.
Решаем задачку по шрифтам
↗
50.
Последний урок модуля
↗
Хостинг. Как живут сайты в интернете
6 уроков
1.
Что такое хостинг и домен
↗
2.
Регистрируем домен
↗
3.
Загружаем сайт на хостинг
↗
4.
Создаем суб домены
↗
5.
Практика | Первый сайт Портфолио
↗
6.
Добавляем работы в Портфель
↗