Перейти к содержанию
Вводный ST—00

С чего начать

За два часа вы соберёте один и тот же экран дважды: сначала в Figma, потом в коде. Это платный пробник — он нужен, чтобы понять, что вам интереснее делать руками, и выбрать основной курс осознанно.

3 модулей8 уроков
2 часавидео и практики
С нулятребования
Навсегдадоступ и обновления
Формат
€3 разовый платёж
Оформить заказ Открыть программу
Оплата картой или через PayPal
Доступ открывается сразу после оплаты
Возврат 14 дней, если не начали смотреть
Результат

Что вы сможете делать

Объяснять, из чего собран любой экран интерфейса
Собирать простой макет в Figma с автолейаутом
Верстать карточку на HTML и CSS с нуля
Читать чужой код и вносить в него правки
Понимать, где заканчивается работа дизайнера и начинается код
Выбрать направление и следующий курс, опираясь на опыт
Программа

3 модулей, один проект

Нажмите на модуль, чтобы раскрыть уроки

01 Из чего сделан экран2 урока · 34 минОткрыт

Разбираем один готовый экран на составные части и смотрим, где проходит граница между макетом и кодом. Без инструментов — только наблюдение и словарь, который понадобится дальше.

Разбираем экран на слои: сетка, текст, элементы
Кто что делает: дизайнер, разработчик и их стык
02 В роли дизайнера: экран в Figma3 урока · 46 мин

Открываем Figma и собираем карточку товара: фреймы, автолейаут, отступы и цвет. К концу модуля у вас есть свой макет, а не повторённый за преподавателем.

Figma за 15 минут: фреймы, слои, автолейаут
Собираем карточку товара из готового текста и фото
Отступы, размеры и цвет: почему макет выглядит аккуратно
03 В роли разработчика: тот же экран в коде3 урока · 40 мин

Тот же макет верстаем в браузере на HTML и CSS, ломаем и чиним. В конце сравниваем оба опыта и выбираем, какой из основных курсов брать.

Размечаем карточку на HTML в пустом файле
CSS: отступы, шрифты и цвета прямо в браузере
Что выбрать дальше: сравниваем два способа работы
Материалы

Что вы получаете

Файл-заготовка в Figma

Фрейм с готовым текстом и картинками, чтобы не тратить время на подготовку и сразу собирать карточку по уроку.

Стартовый проект для кода

Папка с пустыми index.html и style.css и инструкцией, как открыть их в редакторе и в браузере.

Разбор готового решения

Финальный макет и финальный код карточки, чтобы сравнить со своим результатом и найти, где вы отклонились.

Карта дальнейших курсов

Таблица: что изучает каждый из четырёх основных курсов, что нужно знать заранее и какие задачи вы сможете решать.

Первый модуль открыт целиком

Посмотрите уроки первого модуля и первое задание. Если формат не подойдёт — вы ничего не потеряли.

Оформить за €3Смотреть бесплатно