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