Салют, друзья! 🤘

Открываем четвёртый урок бесплатного курса по Taptop.

На этот раз верстаем обложку лендинга. Урок разбили на 3 части, чтобы спокойно пройтись по структуре, деталям и адаптивам.

Внутри сначала разбираем важный момент с SEO: семантические теги для Header, Nav, Main, Section и заголовков.

Потом собираем саму обложку: секцию Cover, контейнер, cover-wrap, высоту на весь экран, внутренние отступы и границы.

Отдельно подробно разбираем Auto Layout: Grid: как он работает, как настраивать, как выставлять элементы и чем отличается от Flex.

Дальше добавляем внутренние элементы: буквы ГКВ через div-маски, центральный блок с заголовком, текстом и кнопкой, отдельный H1 для SEO, серый фон, линии и декоративные квадратики.

В финале адаптируем обложку под планшет и мобильную версию: меняем колонки, отступы, размеры букв, расположение центрального блока и настраиваем 100svh, чтобы обложка корректнее работала на мобильных устройствах.

Новый урок уже доступен в боте: @Izum_Study_bot

Смотрите, пробуйте повторить за Андреем и пишите в закрытую группу, если что-то непонятно или хочется обсудить ❤️