Но перед тем как начнем - быстро взглянем на подключение шрифтов
Одной из первых задач написания стилей является подключение нужных шрифтов. Сделать сейчас это можно очень просто - с помощью сервиса Google Fonts.

Просто выбираем нужный шрифт, можно выбирать сразу несколько, отмечаем какие нужны начертания - справа в углу копируем код и добавляем прямо в файл style.css
@import url('<https://fonts.googleapis.com/css2?family=Roboto:wght@500;700;900&display=swap>');
А ниже применяем этот шрифт к тем классам или тегам (подробнее про шрифты). Например, ко всему документу
body {
font-family: 'Roboto', sans-serif;
}
Для начала мы сделаем верстку для шапки (хедера header)
<header>- новый тег. В это макете все в body делится на 3 части: header, main, footer. Подробнее мы ещё будем о них говорить, а пока давайте рассмотрим один из них.
<header> - тег для обозначения верхней части сайта, обычно содержит логотип, навигацию (меню), кнопки входа в личный кабинет и тд. <nav> - тег, содержащий блок с навигацией по сайту.