Записывайтесь на бесплатный онлайн-интенсив «Верстка для дизайнеров и фрилансеров» в 19:00 мск
Записаться
Вернуться к продуктам
Кратко о видео
В уроке разобрана полная сборка хедера в Taptop: создание структуры шапки, добавление основных элементов, настройка контейнеров, выравнивание через Flex и работа с отступами. Отдельно показана настройка фиксированного позиционирования, чтобы хедер оставался в верхней части экрана при прокрутке.
Главный принцип урока — сначала правильно построить структуру блока, а уже затем настраивать позиционирование. Flex отвечает за расположение элементов внутри хедера, а Fixed позволяет закрепить всю шапку относительно окна браузера.
Урок подойдет новичкам, которые начинают собирать первые сайты в Taptop. Для понимания материала достаточно знать базовые элементы редактора и принципы работы с блоками и контейнерами.
Как сделать фиксированный хедер в Taptop
Хедер — один из первых элементов, который пользователь видит на сайте, но при вёрстке шапки часто возникают сложности: как расположить логотип и ссылки в одну линию? Как правильно задать отступы? Как сделать так, чтобы меню оставалось на экране при прокрутке страницы?
Без понимания принципов позиционирования легко столкнуться с ситуацией, когда хедер уезжает, перекрывает контент или выглядит по-разному на разных устройствах.
В Taptop фиксированный хедер создаётся через правильную структуру и настройку позиционирования. После урока ты сможешь собирать функциональные шапки сайтов и научишься делать их удобными для пользователей.
В этом уроке Вадим показывает, как сверстать хедер сайта в Taptop с нуля. Разбирает структуру шапки, выравнивание элементов внутри блока, настройку отступов и фиксированное позиционирование.
Ты узнаешь, как закрепить хедер в верхней части экрана и настроить его работу при прокрутке страницы.
После просмотра у тебя будет готовая шапка сайта и понимание одного из ключевых способов позиционирования элементов в современной веб-разработке.
Тайминги видео
00:00 — Введение
00:25 — Вёрстка хедера
06:00 — Выравнивание элементов внутри хедера и настройка отступов
06:55 — Настройка фиксированного позиционирования для хедера
