Лекция 1

Начнем с главной страницы. Главная страница будет состоять из нескольких блоков.

Верхний уровень. В котором присутствует навигационное меню.
Заголовок.
Основная часть, состоящая из нескольких постов.
Нижний колонтитул

В файле index.html это будет выглядеть так:

<!DOCTYPE html>
<script src="https://cdn.tailwindcss.com"></script>

<section>
    
<nav></nav>

<header></header>

<main></main>

<footer></footer>

</section>

Добавим логотип в блок nav. Для этого разместим внутри изображение. Так как изображение у нас будет отображаться в верхнем левом углу, как и весь дальнейший контент, сделаем небольшой отступ для всей секции. px и py делают отступ слева и справа и соответственно сверху и снизу на 1.5 и 1 rem. Если вы работаете в vs code и используете live server, то для автоматического применения изменений при сохранении необходимо добавить теги head или body.

Обратите внимание, что px (padding x) и py (padding y) это классы библиотеки tailwind.

Режим отладки браузера

<!DOCTYPE html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<section class="px-6 py-4">

<nav>
    <img src="/images/logo_small.png" alt="My logo">
</nav>

<header></header>

<main></main>

<footer></footer>

</section>

В навигационном меню у нас будет ссылка на какую либо страницу и дополнительная кнопка. Разместим эти два элемента в одном меню, где логотип будет слева, а все остальное справа. Вынесем логотип в div.