Мастерские — Тренажёр HTML Academy

Закрепляем наши полученный знания в большой серии уроков. Создадим несколько простых и не очень элементов, разберёмся как в реальной вёрстке, ну или почти реальной, решаются прикладные задачи.

Мастерские это блок из трёх частей, но в своей сути они все об одном, поэтому я решил собрать всё под одной статьей. Конспектировать там особо нечего, так как теории, в общем-то, практически нет. Кроме последней части, но об этом еще поговорим. Зато есть много испытаний!

В течение всего блока мы создаём какие-то части сайта — меню, кнопки, карточки и даже слайды затронем. В уроках при выполнении задачи здесь явно меньше сопровождения — нам не говорят подставьте в «селектор» такое-то «свойство: значение», а только в общих чертах пишут что нужно найти и что должно получится в итоге.

То есть это такие уроки повышенной сложности, можно сказать. Испытания тоже явно сложнее, что меня лично радует.

Создаём меню

Первая часть всецело посвящена созданию разных меню — горизонтальных и вертикальных, с вложенным подменю и с выпадающим при наведении. Самая простая, «разогревающая» часть.

Вертикальное меню

Сначала создаём простенькое вертикальное меню — используем наш любимый неупорядоченный список <ul>, ссылки <a> внутри пунктов <li>.

Списку убираем маркеры через свойство list-style: none;, а ссылкам подчеркивание через свойство text-decoration: none;. Остальные стили заданы преимущественно через селектор ссылок и их состояние :hover. Также сделали отдельным классом active активную ссылку. Почему? Потому.

В этой части испытания это по сути самостоятельная работа, то есть мы повторяем что прошли. Поэтому напишу их сразу без вывода в отдельную главу.

В первом испытании мы, в общем-то, сделали вертикальное меню:

Многоуровневое меню

Следующая задача — слегка усложнить меню вложенными списками. Алгоритм абсолютно такой же, но теперь нужно иметь ввиду наследуемость CSS, так как стиль у пунктов подменю отличается.

С помощью дочерних селекторов вида .main-menu > li мы, как бы, ограничиваем влияние стилей пунктов меню верхнего уровня от пунктов подменю. Им задаём свои стили отдельно, сохраняя при этом правило «пространства имён».

Испытание тоже на многоуровневое меню. Правда нас заставили всё писать заново. Но я считерил и скопировал нужные блоки из предыдущего испытания, а поверх уже внёс изменения.

Горизонтальное меню

Здесь оно реализовано через inline-block, а не через флексбокс, как я думал будет. Но, опять же, видимо часть достаточно старая. Как минимум старше частей про флексы, поэтому делаем скидку.

От вертикального меню отличается, по большей части, именно свойством display — для пунктов списка <li> мы задаём inline-block, что бы они начали идти друг за другом, а ссылкам <a> задаём display: block; так как все размеры «кнопок» так же задаются через них.

Испытание тоже на составление горизонтального меню, но оказалось немного забаговано — последний пункт меню на образце откуда-то взял ещё пространство справа, из-за чего пришлось ему задавать отдельно padding.

Выпадающее меню

Всё оказывается достаточно просто. Верстается все аналогично, но подменю или меню второго и последующих уровней, если они есть, позиционируются абсолютно position: absolute;.

Пунктам главного меню при этом задаётся относительноe позиционирование position: relative; и таким образом, подменю очень просто располагаются относительно того пункта к которому они относятся.

Далее сами подменю скрываются с помощью display: none;, а их появление записано в :hover состояние пункта на который наводится указатель:

.main-menu .sub-menu {
  ...
  display: none;
  ...
}
.main-menu > li:hover .sub-menu {
  display: block
}

Таким образом, подменю появляется только при наведении на пункт и скрывается как только указатель с пункта убрать. И никакого JavaScript!

Испытание, к сожалению, не даёт проверить всё в динамике — сравнение идёт со статичной картинкой, поэтому здесь нужно только сверстать статично, как бы, активное, «наведённое» подменю. Сделано через дополнительный класс.

На этом с меню заканчиваем и переходим к декоративным мастерским.

Декоративные элементы

Вторая часть посвящена созданию простых, типовых элементов сайта — кнопки соц. сеток, пагинация, карточка контактов и в финале комментарий. Без особых сложностей, но с парой интересных решений.

Кнопки соц. сетей

Первая задачка супер тривиальная — сверстать кнопки «поделиться в соц. сетях». Здесь уже без списков, просто три ссылки <a> с inline-block.

Для иконок использовался спрайт и background-position для нужной иконки. Всё еще поражаюсь этому приёму, интересно многие ли его используют и как часто.

Пагинация

Следующая задача уже посерьёзней. Нужно сверстать переключатель страниц, так называемую «пагинацию». Вёрстка по аналогии с кнопками выше — ссылки в одном контейнере, но с небольшими усложнениями.

В кнопках «вперёд/назад» мы использовали спрайты иконок поверх текста, которому задали text-indent: -1000px;. Не уверен, что это типичное решение, но интересное.

Также мы добавили для проверки класс current, обозначающий текущую страницу. И класс disabled применяющийся ко стрелкам вперёд/назад в случае когда выбрана первая или последняя страница. Ну и: hover для стилизации наведения на кнопку.

Следом идёт испытание, но их в этой части всего два и они не связаны напрямую с тем, что мы делали в уроках, поэтому выведу их уже отдельно.

Контакты

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

Такие иконки нужно задавать через псевдоэлемент ::before, чем мы и займёмся в следующей части. Но здесь, почему-то, ради упрощения делаем на <div> с фоновым изображением через спрайт.

Из-за этого упрощения, правда, нам в итоге понадобился контейнер .item, которому задали relative, уже иконкам absolute, а тексту padding слева на размер иконок. Фехтование на костылях! Ан гард!

Комментарий

Верстаем полностью комментарий, с аватаркой, именем автора, датой публикации и, собственно, текстом комментария. А еще кнопкой «ответить»!

Техника исполнения аналогична блоку контактов — есть общий контейнер .comment, в который отдельно записан каждый компонент без вложений. Контейнеру задано position: relative; для позиционирования аватарки и кнопки ответа.

Контейнеру задан большой margin слева, как раз для эффекта слегка «выпавшей» аватарки, которая позиционируется абсолютно. Больше «хитростей» здесь нет, поэтому переходим к испытаниям.

Испытания

Испытания относительно сложные. Во многом благодаря тому, что в этот раз тут вообще никаких классов заранее не свёрстано — реализуй как можешь.

Первое испытание сверстать карточку курса. Простенько — заголовок, текст и три кнопки, но запахло реально практикой с нуля.

Второе испытание посложнее. В HTML всё свёрстано с классами и id, но в CSS пусто. Задачка стилизовать анонс поста. Основная сложность в абсолютно позиционируемых элементах, их тут четыре штуки и не сразу очевидно где.

Дата и иконка кавычек, понятное дело, а еще иконки тегов и комментариев, что для меня не сразу стало очевидным.

Я сначала сделал их inline-block как и сам текст тегов с числом комментариев. Попал в 99%, но там был какой-то странный отступ в 1px. Решил попробовать схему из части с контактами и, в общем-то, да — иконки absolute, а у текста margin слева в размер иконок.

Остальное оставим на вторую часть. Она более сложная и посвящена скорее хитрым эффектам и относительно сложным решениям. Поэтому рассмотрим их уже в следующей статье.

Большое спасибо за ваше внимание!

Ссылки на другие статьи по HTML Academy:

Знакомство с Веб-разработкой
Знакомство с HTML и CSS
Знакомство с JavaScript
Знакомство с PHP
Таблицы и подробно о формах
Наследование, каскады и селекторы
Блочная модель, поток и сетка на float
Гибкие флексбоксы display: flex
Удобные сетки на гридах display: grid
Пропуск блока «Погружение»
Позиционирование и двумерные трансформации
Теневое искусство и линейные градиенты
CSS-фильтры и Кекстаграм
Мастерские <- Вы здесь
Продвинутые Мастерские
...