Ссылку на этот макет, чтобы повторять, вы можете качать в нашем телеграм канале [ Ссылка ]

В этом видео вы увидите как верстать лендинг из макета Figma с использованием базовых знаний HTML, CSS и JS. Узнаете, как структурировать и разметить контент, добавить стили, подключить шрифты, а также адаптировать страницу для отображения на различных устройствах.

00:00 Вступление
00:18 Создаем базовые файлы и папки
00:44 Подключаем файлы в index HTML
01:24 Сброс стандартных стилей у элементов, выставляем базовые стили макета
02:25 Подключаем шрифты
03:55 Начинаем верстку шапки
04:55 Заворачиваем логотип и экспортируем контентную часть шапки
06:11 Прописываем структуру логотипа и контентной части
08:31 Отдельный тэг для меню
09:05 Можем открыть index HTML
09:20 Выставляем отступы и размеры wrapper’а
10:31 Как выравнивать элементы через display flex
12:04 Выравниваем лого
13:09 Выравниваем элементы header
13:39 Добавляем отступы между элементами и начертания для элементов header
14:37 Фиксим растягивание иконок
16:01 Добавляем аналогичные стили на меню и отступ сверху
16:59 Шапка готова

свернуть