Разработка секции с курсами
Добавим фотографии курсов (используем любые изображения). Разместим их в проекте. Пока оставим только фотографию курса Java.
Курсы будут представлены в скроллируемой секции. Создадим карточку для первого курса. Скруглим верхние углы изображения, изменив углы в соответствующем меню (верхний левый, верхний правый; нижние углы оставим острыми).
Создадим квадратный блок (с примерными размерами, позже изменим) цветом #333. Осветлим цвет, например, до #… (уточнить значение цвета из видео). Для карточки курса Python повторим действия, скруглив только нижние углы. Возможно, потребуется увеличить высоту.
Добавим текстовые надписи инструментом текста (клавиша «T»): «Профессия: Java-разработчик» (шрифт 23px, жирность Bold). Создадим группу «Java».
Добавим надпись «Старт обучения» (шрифт 15px, жирность Regular), выровняем текст. Добавим дату начала обучения (например, «1 января», шрифт Bold).
Добавим надписи «Уровень» и «Начальный», выровняем по центру. Карточка курса готова.
Создание карточек курсов
Продублируем карточку (Ctrl+D или Cmd+D). Удалим картинку Java и добавим картинку Python. Скруглим углы (20px). Изменим цвет блока и размер шрифта (22px). Переименуем группу в «Python». Разместим карточку на странице.
Проверим адаптивность. При необходимости, прижмем элементы к левой и верхней сторонам и установим ширину 404px. Секция с курсами готова.
Дизайн страницы курса
Создадим новый фрейм шириной 404px, назовем его «Страница с курсом». Создадим страницы «Main Page» и «Course Page» в Figma. Перенесем содержимое на страницу «Course Page» в координаты (0, 0).
Дизайн страницы курса Java
Скопируем с главной страницы цвет фона и боковую панель (Ctrl+C/Cmd+C и Ctrl+V/Cmd+V). Добавим изображение Java, удалим скругления и подберем размер.
Скопируем текстовые надписи с главной страницы, расположим их по центру и увеличим размер шрифта. Добавим текст-заполнитель (Lorem ipsum) с фиксированными размерами, изменим размер и расположение текста.
Добавим кнопку «Добавить в корзину». Удалим обводку, увеличим яркость и размер текста (25px). Расположим кнопку по центру. Разделим элементы на группы («Кнопка корзины», «Боковая панель», «Основная часть»).
Адаптивность
Проверим адаптивность и внесем необходимые корректировки для корректного отображения на разных размерах экрана. Дизайн страницы курса готов. При нажатии на курс пользователь будет переходить на страницу с подробным описанием.