arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобраны первые этапы вёрстки по сложному Figma-макету: настройка Style Guide (цвета через переменные, типографика, глобальные классы), вёрстка хедера, hero-секция с нестандартным позиционированием изображения (частично поверх текста, частично под ним). Hero с изображением, перекрывающим несколько секций — это классический кейс для absolute позиционирования. Изображение выносится из потока и позиционируется относительно нужного контейнера. Z-index управляет тем, что поверх чего. В уроке разобрана вся логика этого приёма. Часть 1 длинного практического урока по вёрстке реального проекта. Подходит тем, кто уже уверенно верстает в Taptop и хочет разобрать нестандартные задачи. Style Guide и базовое позиционирование нужны как предварительный контекст.

Верстаем крутой сайт по макету Figma в Taptop: часть 1

Нестандартный макет — изображение частично поверх текста, частично под ним. Непонятно, как реализовать такой порядок слоёв в Taptop. С чего начинать вёрстку сложного макета?
Hero-секция с изображением поверх текста — абсолютное позиционирование, z-index управляет слоями. Перед основной вёрсткой создаётся Style Guide: глобальные классы для типографики и отступов. На практике по реальному макету Figma. Для всех. После просмотра верстаешь нестандартные hero-секции и начинаешь работу со Style Guide.
Тайминги видео
00:00 — Знакомство и план стрима 20:00 — Style Guide: цвета, шрифты, глобальные классы 55:00 — Хедер: навигация и логотип 1:25:00 — Hero-секция: картинка поверх и под текстом одновременно 1:55:00 — Ответы на вопросы о коллекциях и roadmap

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

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