#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

📚 Ссылки:

💬 Чат в телеграмме (помощь новичкам):

🔸 Boosty (поддержать канал):

🗂️ Бесплатные курсы на канале:

📌 Автор:

#frontend #фронтенд #верстка #версткасайтов

[Tehnokrott]

Саша - красава! Ну как же красиво ты всё делаешь. Просто получил эстетическое удовольствие как ты верстаешь: внимание к мелочам, подробное объяснение, прям как я мебель. Хочу такой же подробный и понятный курс по мебели сделать)

[nbgmjgw]

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

[jivihpz]

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

[egorrublev]

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

[svitboomer]

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

[smotritelyoutube]

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

[ydncznf]

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

[unlimitedgames]

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

[CoralLynx]

Большущее спасибо за контент 🙏

Наконец-то понял, как применять clamp на практике 😅

И про aspect-ratio просто пушка, теперь всегда буду это юзать)

Ждем следующую часть! ❤

[OnlyProg-dmgc]

Спасибо за урок! Ды ты волшебник вёрстки в моих глазах))

[nnqyyhs]

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

[biscvie]

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

[xwsplkk]

Александр, супер 👍 Особенно за семантику отдельный лайк.

Не хочу душнить, но думаю было бы полезно упомянуть ещё про переполнение контента.

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

[sleepyNovember_project]

Красотища, контент который просто приятно смотреть, неважно, понимаешь всё, или не всё😅

[gos]

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

[svsv]

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

[mushroom]

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

[Kolobaka]

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

[miterevv]

Спасибо за ваш ролик и репозиторий с кодом отдельно. Вроде и тема не сложная, делаю все параллельно с вами и смотрю - результат не сходится. Начинаю копаться, вместо <div> <br> в открывающем теге, хотя точно помню что делал правильно. Начинаю разбираться и повторять действие - оказалось я установил плагин, который "помогает работать с открывающим и закрывающим тегом", который мне стреляет в ногу. Для теста кода вставил кусок вашего, все заработало - так понял что проблема в html и начал внимательно смотреть там. Благодарю.

[bjoegtr]

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