arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобрана базовая структура шапки с нуля: секция с боковыми отступами 4% (для пропорционального адаптива вместо фиксированных пикселей), контейнер с max-width 100% и внутренними отступами, Flex с выравниванием по центру. Разобран типичный состав шапки: контакты, соцсети, логотип, навигация. Боковые отступы 4% от ширины секции — простой способ сделать шапку адаптивной без правок на брейкпоинтах: отступ уменьшается пропорционально экрану. Flex в контейнере расставляет все дочерние элементы в строку с заданным выравниванием и gap. Урок — часть 1 серии «Собираем шапку». Начинай здесь: закладывается структура, которую все последующие части дополняют. Понимание секции и контейнера в Taptop нужно как минимальная база.

Собираем шапку для сайта в Taptop: часть 1

Начинаешь верстать шапку с нуля — и сразу вопросы: как задать отступы, чтобы они работали на всех экранах? Как разместить логотип и контакты в одну строку? С чего вообще начать?
Первая часть сборки шапки: задаём боковые отступы секции в процентах — автоматически уменьшаются пропорционально экрану. Flex в контейнере выстраивает все элементы в одну строку, выравнивание по вертикали — через align-items. Для новичков, которые верстают первую шапку. После просмотра понимаешь базовую структуру и начинаешь собирать шапку правильно.
Тайминги видео
00:00 — Секция и контейнер: базовые отступы 00:45 — Flex и выравнивание по центру

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

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