arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобрана вёрстка по Figma-макету с нуля: настройка Root с fluid-вёрсткой в vw, Style Guide с глобальными классами, hero-секция с нестандартным позиционированием, карточки продуктов, секция отзывов. По ходу — ответы на вопросы чата про единицы, классы, адаптив. Fluid-вёрстка через Root — главный принцип: брейкпоинт Figma-макета (например 1440px) переводится в vw (14 / 1440 * 100 ≈ 0.97vw). Дальше все размеры в em — они масштабируются пропорционально. Адаптив требует минимальных правок. Урок — длинный практический разбор от начала до конца. Подходит тем, кто хочет освоить fluid-вёрстку на реальном проекте. Базовые знания Taptop (Flex, классы, адаптив) нужны. Понимание vw и em после урока по единицам измерения обязательно.

Верстка сайта с нуля по макету Figma в Taptop: подробный разбор

Берёшь макет Figma и пытаешься верстать — и непонятно, с чего начать. Style Guide? Root? Брейкпоинты? Как выстроить процесс, чтобы не переделывать потом?
Fluid-вёрстка начинается с Root: базовый шрифт переводится в vw под брейкпоинт Figma. Дальше Style Guide: классы для заголовков, кнопок, контейнеров. Только потом — основная вёрстка. Подробный разбор на реальном макете. Для всех, кто верстает по макетам Figma. После просмотра выстраиваешь процесс вёрстки правильно с самого начала.
Тайминги видео
00:00 — Знакомство, план стрима и обзор макета 20:00 — Root и настройки fluid-вёрстки 40:00 — Style Guide: глобальные классы с нуля 1:10:00 — Hero-секция: нестандартная иерархия изображений 1:50:00 — Блоки с карточками 2:40:00 — Кастомный слайдер 3:20:00 — Форма обратной связи 3:50:00 — Адаптив и финальная проверка

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока