#2 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma | Секция banner

✏️ Продолжаем верстать лендинг с того же момента, на котором остановились в прошлый раз. Ранее мы проанализировали макет, подключили к проекту нестандартные шрифты, добавили нормализацию стилей, составили набор глобальных переменных в root-селекторе, добавили немного стилей для `body` и утилитарного класса `container`, ну и в конце концов - сверстали десктопную версию шапки и адаптировали её под узкие экраны мобильных устройств. В этот раз - займемся секцией `banner`.
🔴 Timeline:
▶ 00:00​ | Вступление
▶ 00:28​ | Доработка header - фоновый цвет
▶ 00:55​ | Доработка header-menu-link - свойство aspect-ratio
▶ 01:22​ | Доработка header-burger-button - свойство aspect-ratio
▶ 01:30​ | Доработка header-burger-button - UX и доступность, класс visually-hidden
▶ 03:53​ | Разметка main
▶ 04:03​ | Разметка секции banner, ч. 1
▶ 05:07​ | Правила работы с заголовками
▶ 06:51​ | Разметка секции banner, ч. 2
▶ 11:10​ | Стилизация секции banner
▶ 21:29​ | Адаптация секции banner
📚 Ссылки:
➖ Макет Kropp Fitness в Figma: www.figma.com/file/m3lT3GF4mU...
➖ Репозиторий с кодом проекта: github.com/aleksanderlamkov/k...
➖ Статья htmlacademy "Как прятать" (утилитарный класс visually-hidden): htmlacademy.ru/blog/css/short-12
➖ Форматы времени в атрибуте datetime для тега time: doka.guide/html/time/
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #верстка #версткасайтов

[@user-nb2gm1jg7w]

Это лучший курс, который я когда-либо изучала. Все четко, без воды, без рассусоливаний и практически без ошибок. Узнала много нового. Современная верстка. Спасибо Вам, Александр!!!! Так что изучу все, что у Вас есть. Я - Ваша преданная ученица! Наконец, у меня появилась уверенность, что у меня все получится.

[@AleksanderLamkov]

Спасибо за теплые слова! Если будут возникать затыки во время обучения, не стесняйтесь писать в чат: t.me/friendlyFrontendChat Там я и другие ребята постараются помочь 😊

[@user-nb2gm1jg7w]

@@AleksanderLamkov Спасибо большое! Я изучу все Ваши уроки. Попробую присоединиться в телеге. Мне часто не хватает совета профессионала, так что очень рада знакомству! У меня столько мусора в голове по верстке. Моя мечта стать профессионалом. Ну, или идти к этой вершине. :) Закончила этот курс, думаю, к какому перейти далее. Хочу подробнее познакомиться с БЭМом, так что пошла к Вашему курсу "Вёрстка сайта с 0 до результата | HTML, SCSS, БЭМ". Вся в предвкушении.

[@svitboomer8840]

Хочу купаться в твоём контенте. Чувствую как мои hard skills растут

[@user-ji6vi7hp2z]

Отличные уроки. По содержанию, вообще, выше всяких похвал!

[@smotritelyoutube]

Супер!!! Жду эти уроки больше чем какой-то развлекательный контент. Ну просто супер, все четко, по теме, структурировано, дикция хорошая, все мысли заранее сформулированы, пушка!!! И наконец-то я понял какого х** у меня вечно li были выше чем содержимое, вообще не знал за эту тему, что у элементов списка свое свойство дисплей, автор молодец!!!

[@user-yd6nc3zn3f]

Еее. После первого же видоса заметно прокачался. В практическом плане это лучшие видосы по верстке! Спасибо, Александр.

[@unlimitedgames8357]

Отдельное спасибо за min clamp Жду следующих выпусков

[@CoralLynx]

Большущее спасибо за контент 🙏 Наконец-то понял, как применять clamp на практике 😅 И про aspect-ratio просто пушка, теперь всегда буду это юзать) Ждем следующую часть! ❤

[@egorrublev5529]

Премного благодарен, за годный подробный контент. Александра Хотелось бы видеть чаще или дольше.

[@user-zw7tc6lv9z]

дольше не надо такое время видео самое оптимальное для обучения

[@egorrublev5529]

или выходили что бы 2 раза в неделю@@user-zw7tc6lv9z

[@AleksanderLamkov]

К сожалению, делать мастер-классы чаще с такой же концентрацией информации пока физически не получается 😕 Сценарий, разработка, съемка, монтаж - съедают уйму времени. А записывать без подготовки и выпускать контент без монтажа - точно не хочу :)

[@user-nn9qy1yh3s]

не понимаю, почему так мало лайков, надо как то продвигать канал - реально цепляет

[@biscvie]

Ждем еще уроков, спасибо) Сложновато правда, но стараемся)

[@mushroom2267]

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

[@AleksanderLamkov]

Привет! Разве что действительно "небольшой" :) Уж слишком много возможных сценариев при работе с гитом...

[@mushroom2267]

@@AleksanderLamkov разумеется) Гит полезнейший инструмент и мастхэв в разработке, но для многих это настоящее препятствие осилить его изучение. А ты как раз делаешь ёмкие по содержанию, но не перегруженные ненужной информацией видео, что делает их уникальными по ценности материалами. Гит сюда бы идеально вписался.

[@1gos]

Очень круто! Узнал много удобных вещей! Спасибо!

[@sv2234sv]

Спасибо, очень интересно и очень полезно!

[@user-xw4sp6lk7k]

Александр, супер 👍 Особенно за семантику отдельный лайк. Не хочу душнить, но думаю было бы полезно упомянуть ещё про переполнение контента. К примеру в блоке баннера, если породублировать сейчас текст и уменьшить экран по вертикали, то текст будет выходить за границы блока (если я все правильно заметил). Я обычно высоту полноэкранного блока также ограничиваю с помощью clamp или хотя бы min-height: max(700px, 100vh)

[@AleksanderLamkov]

Привет! При текущих стилях учитывается переполнение контентом, верстка не сломается. Если продублировать текст много раз, секция займет столько высоты, сколько ей потребуется. Верстка поломалась бы только, если бы вместо свойства min-height мы использовали height.

[@user-xw4sp6lk7k]

​@@AleksanderLamkovвот это я как раз и проглядел) сорри А скажи, пожалуйста, стоит ли ограничивать по максимальной высоте? На 4к экранах, к примеру, нормальная практика оставлять блок на всю высоту или лучше "прибрать"?

[@AleksanderLamkov]

Хм, лучше это учесть, как раз функция min поможет. Спасибо за идею! min-height: min(1080px, calc(100vh - var(--header-height))); Допустим, на экранах высотой 1080px и больше, минимальная высота будет не больше 1080px.

[@user-xw4sp6lk7k]

@@AleksanderLamkov Посмотрел свой рецепт😁 Если упростить то так делал - min-height: clamp(700px, 100vh, 1100px);

[@Kolobaka266]

Спасибо вам большое за ваши видео, очень многим моментам научилась у вас, очень понятно объясняете, у вас талант доносить информацию 🤌

[@user-bj8oe1gt3r]

Отличные уроки, видно что немаленький опыт, продолжай в том же духе и соберёшь лям подписчиков)

[@megashield_og]

хороший урок, хочется больше небольших объяснений на разные моменты

[@AleksanderLamkov]

Привет! Задавай вопросы, я на всё отвечу. Или можешь написать в телеграм, там я или другие ребята помогут: t.me/friendlyFrontendChat

[@m.manukian]

ну просто красавчик

[@user-zw7tc6lv9z]

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

[@Bit_Maximum]

Спасибо

[@itobold]

Спасибо большое за труд. С размерами с макета понятно(там все четко), но вот когда ты произносишь: "предположим значение будет столько то, давайте у нас будет столько, я бы сделал вот столько" хотелось бы минимум информации, чем ты руководствуешься, что бы научится думать в правильном направлении. Если я правильно понимаю, если нет дизайна адаптива на мобилки, то нужно просто руководствоваться читабельностью и соблюдением пропорций? Но на боевой, если заказчик будут требовать адаптив, без дизана согласованного, лучше не верстать?

[@AleksanderLamkov]

Привет! При адаптации руководствуюсь логикой и чувством прекрасного :) И самое главное - на уровне кода стараюсь не делать костылей, поэтому, если даже макет к ним вынуждает, частенько отклоняюсь от параметров макета и делаю «хорошо на уровне кода», сглаживаю неровные значения, агрегирую разнящиеся свойства однотипных компонентов во что-то унифицированное. Вообще, как только поверстал непрерывно около года на первой работе, то процесс адаптации у меня теперь всегда на интуитивном уровне работает. А по поводу «заказчик требует адаптив, но в макете адаптива нет» - я в принципе против того, чтобы дизайнеры делали адаптивные версии сайтов в макетах, так как зачастую нам, разработчикам, потом страдать, вставляя костыли там, где можно было бы обойтись без них. Дизайнер - не разработчик и не знает, как его детище будет выглядеть на уровне кода. Дизайнеру зачастую плевать на то, что для реализации интерфейса мобильной версии сайта разработчику придется буквально полностью перекраивать разметку и перебивать множество правил стилей. Ну а если опытный разработчик адаптирует сам, то он понимает, как с минимальными (!) усилиями и минимальным количеством дополнительного кода адаптировать всё так, чтобы и конечному пользователю было удобно, и сам сайт не страдал по перформансу от костылей. В общем, верстать макет без нарисованного адаптива - кайф. P. S. Если дизайнер опытный и есть дизайн-ревью (в крупных серьезных компаниях такое может быть), то макет и адаптив может быть адекватным, но на своей практике из сотни макетов я видел таких очень-очень мало.

[@neilhackgamer5941]

Круто! Александр, можете ли вы сделать видео по настройке IDE Webstorm, просто интересно какие у вас сниппеты, настройки в целом?

[@AleksanderLamkov]

Привет! Настроек на самом деле минимум: - разлочил возможность зумить масштаб текста колесиком мыши; - поставил плагин темы Oceanic Dark Theme; - настроил сниппеты под некоторые HTML-теги, чтобы, например, тег кнопки разворачивался сразу с заполненным атрибутом type="button", чтобы тег изображения разворачивался с атрибутами alt, width, height и loading="lazy" и т. п. Вот пишу этот коммент и понимаю, что видео на эту тему было бы действительно полезно новичкам. Может ещё каких неочевидных полезностей накопаю… В общем, спасибо за идею! Возьму в работу :)

[@neilhackgamer5941]

@@AleksanderLamkov супер!

[@OkazakiTomoyasan]

топ😎

[@w0rsttttt]

Ваш канал - просто находка. Хотелось бы узнать, будет ли подробнее разобрана SEO оптимизация?

[@AleksanderLamkov]

Привет! К сожалению, нет. Я в SEO не разбираюсь, если не считать рекомендаций о семантике. Там ведь целый мир метатегов и микроразметки, на изучение этого нужно немало времени.

[@skro1ik410]

19:35 Я размер родительского объекта( li ) увеличил и область нажатия на кнопку увеличилась.Так можно сделать?Просто я так сделал и при наведении на li меняется курсор как и при наведении на button.Так работать будет или нет?

[@skro1ik410]

19:35 Я размер родительского объекта( li ) увеличил и область нажатия на кнопку увеличилась.Так можно сделать?

[@akylbekbaizakov]

👍

[@skro1ik410]

Я поставил размер слова crossfit 360 px и оно у меня в экран не влезало,а у тебя наоборот.Это из-за монитора,или как?

[@natanatalie987]

Очень полезные уроки по вёрстке! Получается, h1 должен содержать название, которое бы понятно озаглавило всю страницу. Нельзя обернуть слово Crossfit в этот тэг, выходит?

[@AleksanderLamkov]

Угу, верно, слово "Crossfit" плохо подходит для главной страницы фитнесс-клуба, оно неинформативно.

[@MsDlovar]

Отличный контент, спасибо. Мне очень понравился трюк с кружочками у пагинации слайдера через псевдоэлемент и расширение зоны клика у кнопок. Есть один вопрос, сейчас высота шапки задана в 90px и высоту секции banner считаем через формулу calc(100vh - var(--header-height)). Все хорошо пока шапка не становится в два ряда на узких экранах, там ее высота получается уже 92px и мы получаем вертикальный скрол на эти самые 2 пикселя. Я понимаю, что это сейчас легко исправить уменьшив горизонтальные отступы в шапке. Но бывают же ситуации, когда высота шапки радикально изменится от ширины экрана, и там уже такой костыль не прокатит. Как в этом случае быть? Надо чтобы в calc(100vh - var(--header-height)) поставлялась не константа-переменная а динамическое значение реальной шапки. И еще вопрос, всегда было интересно как верстают сайты в которых общий фон (предположим картинка) у блока header и и к примеру первой секции блока main. Получается у главной навигации сверку сайта и первой секции героя один и тот же фон. Их что в одну обертку оборачивают? Тогда получается обертка начинается в header а заканчивается в main, так можно делать? Еще раз спасибо за ваш труд!

[@AleksanderLamkov]

Привет! > Но бывают же ситуации, когда высота шапки радикально изменится от ширины экрана, и там уже такой костыль не прокатит. Как в этом случае быть? Тут потребуется JS, чтобы вычислять динамически высоту элемента шапки для значения переменной --header-height: const rootElement = document.documentElement const headerElement = document.querySelector('.header') const saveHeaderHeight = () => { rootElement.style.setProperty('--header-height', headerElement.offsetHeight) } saveHeaderHeight() window.addEventListener('resize', saveHeaderHeight) > И еще вопрос, всегда было интересно как верстают сайты в которых общий фон (предположим картинка) у блока header и и к примеру первой секции блока main. Получается у главной навигации сверку сайта и первой секции героя один и тот же фон. Их что в одну обертку оборачивают? Тогда получается обертка начинается в header а заканчивается в main, так можно делать? Общие обертки не нужны. Просто можно сделать для шапки position fixed или absolute и поместить в верхний левый угол, растянув на 100% ширины. Таким образом шапка наложится под весь остальной контент, в частности - на баннер.

[@MsDlovar]

@@AleksanderLamkov спасибо за развернутый ответ, теперь я понял. У вас большое будущее на KZbin.

[@user-do3or8jr7v]

Многие в видео-уроках предлагают хедер, майн, футер упаковывать во врапер. Это избыточно? Вы не используете.. Вы работаете в вк? Вы в видео даёте по стандартам вк?

[@AleksanderLamkov]

Привет! Обертка wrapper зачастую избыточна. Всё, что задают во wrapper, можно прописать и для body. Да, я работаю в ВК. Компания большая и общих стандартов по фронтенд-разработке у нас нет, как и в большинстве крупных компаний. Я в первую очередь делюсь личной экспертизой, которую накопил за последние годы работы в разных местах на разных проектах.

[@user-do3or8jr7v]

@@AleksanderLamkov Спасибо. Сложно, но интересно.

[@TeomunMete]

Здравствуйте и спасибо за контент . Когда я задаю h3 360px тут же вылазить за предел контента .а с min() без проблем работает

[@AleksanderLamkov]

Привет! Спасибо за обратную связь :) Да, так и должно быть, функция min и vw-значением внутри спасает в ситуациях, когда текст начинает выпирать за пределы экрана.

[@vehiclesport662]

Слишком быстро говорите), а так все круто, поплыл на стрелке , она не прижимается к crossfit :D

[@AleksanderLamkov]

Привет! По скорости скорее всего из-за особенностей монтажа так кажется. Оцените потом следующий мастер-класс (уже вышел на канале), там иначе поработал на монтаже с темпом, больше естественных пауз, должно восприниматься лучше :) По поводу проблемы со стрелкой - напишите в чат t.me/friendlyFrontendChat, скиньте архив с текущим состоянием проекта, кто-нибудь или я сам через пару часов смогу вам помочь.

[@user-ff6jr6ox7i]

Не могу понять почему у меня в h3 текст вылазит за пределы блока. Что я не так сделал?

[@AleksanderLamkov]

Привет! В описании под видео есть ссылка на гитхаб, там код можешь мой посмотреть и сравнить со своим. Если не найдешь сам - пиши в чат t.me/friendlyFrontendChat, поможем.

[@itobold]

По поводу халтуры дизайнера и пагинации, там если в режиме дизайнера посмотреть то видно черточку между элементами(если ее подвигать то это окажется как раз гэп судя по всему), очень забавно как ты с первого раза угадал значение 14 px(тупа на опыте) ну или посчитал пиксели) короче видимо фигма этот момент продумала.

[@AleksanderLamkov]

Да, ты прав! Спасибо, что заметил. Перепроверил в режиме дизайна, там отдельно 3 «буллета», зря я тут уколол дизайнера. Фигма очень уж странно в дев режиме объединила всё в один слой, не знал, что такое бывает. Ну а пиксели, да, я посчитал «на глаз» :)

[@sv2234sv]

​@@AleksanderLamkov Или так: общая ширина известна 56px, высота круга 10px, три круга по ширине это 30px, между ними два интервала, 56-30=26 / 2 = 13px 😃

[@mikhailkaras7411]

А это точно для новичков, или я такой тупой)))

[@AleksanderLamkov]

Привет! А с чем именно возникли трудности? Я постарался объяснить каждый момент. P. S. Если не смотрел курсы по HTML и CSS на моём канале, советую с ними ознакомиться перед этим мастер-классом. Там разжевывал буквально всё, о чем вещаю в текущем видео 🙃

[@skro1ik410]

19:35 Я размер родительского объекта( li ) увеличил и область нажатия на кнопку увеличилась.Так можно сделать?Просто я так сделал и при наведении на li меняется курсор как и при наведении на button.Так работать будет или нет?

[@skro1ik410]

Я поставил размер слова crossfit 360 px и оно у меня в экран не влезало,а у тебя наоборот.Это из-за монитора,или как?

[@skro1ik410]

19:35 Я размер родительского объекта( li ) увеличил и область нажатия на кнопку увеличилась.Так можно сделать?

[@AleksanderLamkov]

Нет. Нужно увеличивать область нажатия самого интерактивного элемента, то есть ссылку.

[@skro1ik410]

@@AleksanderLamkov Понял.А еще вестка по шаблону будет?По другому

[@AleksanderLamkov]

Будет, но после курса по JS.

[@skro1ik410]

@@AleksanderLamkov хорошо,буду ждать

[@skro1ik410]

​@@AleksanderLamkov Просто я так сделал и при наведении на li меняется курсор как и при наведении на button.Так работать будет или нет?

[@skro1ik410]

19:35 Я размер родительского объекта( li ) увеличил и область нажатия на кнопку увеличилась.Так можно сделать?Просто я так сделал и при наведении на li меняется курсор как и при наведении на button.Так работать будет или нет?

[@AleksanderLamkov]

Нет, стоить увеличивать область нажатия именно интерактивного элемента, а не .

[@skro1ik410]

@@AleksanderLamkov последний раз спасибо

[@skro1ik410]

Я поставил размер слова crossfit 360 px и оно у меня в экран не влезало,а у тебя наоборот.Это из-за монитора,или как?

[@AleksanderLamkov]

Что-то твои комментарии аж по три раза дублируются. Если элемент с текстом с теми же стилями, что и в видео, у тебя выглядит не так, то скорее всего проблема в font-family, наверняка у тебя шрифт не тот отображается.