Вёрстка простого лэндинга
Создадим пустую папку в любом месте на компьютере, например на рабочем столе. В этой папке создадим файл index.html.
Начнём заполнять index.html базовой разметкой без которой страница не заработает.
На первой строке укажем <!DOCTYPE html> для того, чтобы браузер понял, что это разметка и с index.html нужно работать как с обычной страницей.
Потом сразу добавим первый обязательный тег <html>.
Теги бывают парные и одиночные. Тег <html> — парный. Значит его нужно закрыть </html>.
Добавим обязательный атрибут lang для тега <html>, чтобы подсказать браузеру, на каком языке будет текст сайта. По макету весь текст английский.
После добавим обязательный тег <head> в <html>. Тег <head> отвечает за мета-информацию сайта.
Обратите внимание, что <head> вложен внутрь <html>, то есть вставлен между открывающий <html> и закрывающим </html>. Это называется вложенность тегов.
Парные теги можно вкладывать друг в друга. Это одно из отличий от одиночных тегов.
Добавим кодировку сайта. Наконец-то нам встретился одиночный тег, который не нужно закрывать с помощью </meta>.
Какие бывают кодировки и почему мы добавили именно такую мы не будем рассматривать. Это тема целого доклада.
Добавим обязательный тег <title> и назовём наш сайт. Описание помещённое в <title> будет отображено на вкладке браузера.
Добавим последний обязательный парный тег <body>, который также, как и <head> располагается внутри <html>.
На данный момент у нас есть минимальная структура любого HTML-документа.
Теперь добавим базовую стилизацию. Для этого вначале создадим папку styles рядом с index.html. После добавим styles.css в папку styles.
Подключим стилевой файл к странице.
Но из-за того, что в стилевом файле нет ни одного правила мы не видем изменений на странице. Давайте перекрасим страницу в фиолетовый, чтобы проверить работоспособность стилевого файла.
Удалим правило для body, чтобы оно нам не мешало добавлять разметку. Мы ещё вернёмся к styles.css.
Теперь экспортируем всю графику из макета и оптимизируем её. Этот процесс в демонстрации не показать поэтому смотрите запись на Youtube.
Перед тем как делать вёрстку обычно подробно рассматривают макет.
Макет состоит из:
- шапки с логотипом, навигацией и кнопок управления
- основной секции с изображением льва, крупной надписью «Li-n», кнопки и текста.
Начнём с шапки.
Добавим логотип, который расположен в <header>. Чтобы показать изображение, требуется использовать одиночный тег <img>.
У тега <img> четыре обязательных тега:
src — для показа изображенияwidth и height для размера изображения. Использование этих атрибутов является хорошим тоном.alt — для описания изображения. Подробнее для чего нуден alt я рассказываю в этой статье.
Так как принято делать логотип кликабельным обернём тегов <a> логотип. Ссылка логотипа обычно ведёт на главную страницу.
Добавим навигацию.
Навигация состоит из списка ссылок, а подробнее:
- списка
<ul>; - пункта списка
<li>; - и ссылки
<a>.
Добавим сразу весь список из трёх ссылок. Обратите внимание на цвет ссылок. Браузеры некоторым элементам добавляют стили по умолчанию (браузерные стили). Для ссылок браузерными стилями являются синий цвет и подчёркивание снизу.
Дальше сложный момент. Так как сложно сказать какие элементы мы видим. Это либо кнопки <button>, которые открывают модальные окна, либо ссылки <a> на другие страницы.
Так как в навигации у нас уже есть ссылки, давайте используем <button> ради разнообразия. А в конце если поймём, что это всё-таки ссылки, заменим на ссылки.
Так как кнопки по умолчанию имеют type="submit" для отправки форм, сменим тип на button для более правильной работы. Ведь мы не собираемся никакие формы отправлять?
Добавим иконки кнопок, которые мы экспортировали из макета.
По правилам мы обязаны описать графику любого интерактивного элемента. После, когда мы начнём работать со стилизацией мы доступно скроем этот текст. Доступно скроем — означает, что глазами мы больше не увидим этот текст, зато его можно будет услышать с помощью специализированных программ, которые называются скринридеры. Скринридер буквально зачитывает в слух элементы сайта.
А теперь приступим к именованию сущностей. Для этого почти всем элементам добавим атрибут class, чтобы в дальнейшем обращаться к именованным элементам из стилей.
Не будем оригинальными, <header> именуем как header.
Логотипу добавим класс logo.
Для изображения логотипа пока не будем добавлять класс, так как возможно он нам вообще не понадобится. Но если бы добавляли, то он был бы logo__image.
Обратите внимание, что атрибут class идёт всегда сразу после названия тега. Это делается для соблюдения консистентности кода.
Для навигации добавим navigation.
Кстати, если словарь часто используемых слов в CSS-классах, который можно использовать для именования элементов.
Для списка ссылок используем слово list, но так как у списка ссылок прямое наследование от навигации, то пристыкуем названия navigation__list. Из такого названия сразу видно, что это список относящийся к навигации.
С пунктом навигационного списка поступим также, так как пункт непосредственно относится к навигации, то пристыкуем названия с помощью __.
Скопируем классы на остальные пункт <li>.
Для ссылки тоже дадим стыковочное название по той же самой причине — ссылка непосредственно относится к навигации.
Скопируем на остальные ссылки навигации.
Добавим дополнительное описание (класс) для первой ссылке. Так как на макете она визуально отличается от остальных ссылок своим подчёркиванием.
Теперь у нас есть основное описание navigation__link, в котором мы говорим, что это ссылка.
И дополнительное описание navigation__link--current, которое дополняет основное тем, что ссылка визуально отличается от остальных.
Для дополнительного описание у элемента может быть несколько классов в одном атрибуте class.
Хороший пример
<a class="navigation__link navigation__link--current" href="index.html">Home</a>
Плохой пример
<a class="navigation__link" class="navigation__link--current" href="index.html">Home</a>
Давайте немного улучшим разметку с кнопками и обернём их в список. Мы пока ещё выясняем кнопки это или ссылки и что эти элементы должны вообще делать.
Но на данный момент кажется, что эти элементы обладают одинаковой полезностью. Возможно скоро мы всё поменяем как только поймём с чем имеем дело.
Теперь пойдём крупными мазками в именовании и будем останавливаться только на интересных моментах.
Эти три кнопки по сути являются какими-то управляющими элементами поэтому назовём весь блок controls, а все внутренние элементы состыкуем:
__item — пункт списка;__button — кнопка.
Графику пока не вижу смысла именовать, но может быть ещё добавим название.
Шапка на этом этапе размечена. Перейдём к промо-блоку.
Текст описывающий интерактивную кнопку нужно скрыть, так как визуально он не отображен, но текст всё ещё доступен. Для этого добавим класс visually-hidden, про который мы подробно рассказали в HTML шортах.
Сейчас текст ещё видно, но с помощью стилизации мы его доступно скроем.
Добавим всю разметку для промо-блока, состояющию из: основной секции с изображением льва, крупной надписью «Li-n», кнопки и текста.
А теперь именуем элементы.
На это разметка сайта завершена. Переходим к стилизации.
В стилизации всегда начинают с общих правил, которые касаются всего сайта или всей страницы: шрифты, цвета.
На сайте используется шрифт Poppins с тремя начертаниями 400, 500 и 700. Сходим в Google Fonts и добавим в <head> всё что он нам даст.
Добавим использованием шрифта на сайте по инструкции от Google Fonts. Теперь все тексты у нас отображаются шрифтом Poppins.
Теперь добавим правило меняющее расчёт размеров для всех элементов и псевдоэлементов.
Добавим правило для всех изображений, чтобы они не тянулись больше своих родительских блоков и сохраняли пропорцию (height: auto).
Наконец-то доступно скроем все элементы с visually-hidden.
Добавим стили для текстов всего сайта.
Правило: если добавляем светлый текст, то фон должен быть тёмным — для читаемости текста. И наоборот: если текст тёмный, то фон светлый.
Зададим размеры сайту, и удалим отступы.
Перейдём к стилизации шапки. Тут надо решить, что делать с тем, что шапка находится над сайтом (секцией со львом).
Решение в лоб: вырвать элемент из потока (position: absolute) и повесить над всем сайтом (z-index: 1).
Займёмся расположением элементов внутри шапки. Для этого используем флексы display:flex.
С помощью justify-content: space-between; раскидаем элементы по краям, а с помощью align-items: center; центрируем по вертикали.
Перекрасим ссылки и расположим их с помощью флексов.
Перекрасим ссылки и расположим их с помощью флексов.
Расположим кнопки управления.
А теперь раскрасим.
Перейдём к промо-блоку. Сначала его нужно растянуть на весь сайт.
Расположим надпись «Li-n». Возьмём расположение из макета.
Расположим и стилизуем текст.
Расположим и стилизуем элементы управления промо-блока.
Стилизуем кнопку.
Лэндинг готов. Давайте немного его улучшим и добавим ховер-эффектов. Хофер-эффекты — это эффекты, которые срабатывают при наведении курсора мышки на элемента.
Добавим смену цвета у ссылок с белого на зелёный.
Теперь у ссылок есть ховер-эффект, но он происходит слишком резко. Сделаем плавную смена цвета.
Ещё раз наведите на ссылку.
Теперь у ссылок есть ховер-эффект, но он происходит слишком резко. Сделаем плавную смена цвета.
Ещё раз наведите на ссылку.
Надпись «li-n» мы вынесли в отдельный слой. Её можно было совместить вместе со львом.
Давайте воспользуемся тем, что li-n сделан отдельным файлом и добавим небольшой ховер-эффект.
На этом вёрстка закончена.
