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

О видео «#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: https://www.figma.com/file/m3lT3GF4mUgEBaU3qysyeu/10%2B-Free-Web-UI-designs-(Community)?type=design&node-id=0%3A1&mode=design&t=CzUspvuV0m0Mn8KA-1 ➖ Репозиторий с кодом проекта: https://github.com/aleksanderlamkov/kropp-fitness/ ➖ Статья htmlacademy "Как прятать" (утилитарный класс visually-hidden): https://htmlacademy.ru/blog/css/short-12 ➖ Форматы времени в атрибуте datetime для тега time: https://doka.guide/html/time/ 💬 Чат в телеграмме (помощь новичкам): https://t.me/friendlyFrontendChat 🔸 Boosty (поддержать канал): https://boosty.to/friendly-frontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 🗺 Frontend Roadmap 2024 https://youtu.be/1WRJKgwlX9w?si=NjyzbyLMguVV4Frr 📌 Автор: ➖ Личный сайт: https://aleksanderlamkov.ru/ ➖ Telegram: https://t.me/friendlyFrontend ➖ Boosty: https://boosty.to/friendly-frontend ➖ GetMentor: https://getmentor.dev/mentor/aleksandr-lamkov-1480 ➖ Solvery: https://solvery.io/mentor/aleksanderlamkov #frontend #фронтенд #верстка #версткасайтов