[Александр Ламков — Friendly Frontend] #2 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma | Секция banner
🎯 Загружено автоматически через бота:
🚫 Оригинал видео:
📺 Данное видео является собственностью канала Александр Ламков — Friendly Frontend. Оно представлено в нашем сообществе исключительно в информационных, научных, образовательных или культурных целях. Наше сообщество не утверждает никаких прав на данное видео. Пожалуйста, поддержите автора, посетив его оригинальный канал: @AleksanderLamkov.
✉️ Если у вас есть претензии к авторским правам на данное видео, пожалуйста, свяжитесь с нами по почте support@, и мы немедленно удалим его.
📃 Оригинальное описание:
✏️ Продолжаем верстать лендинг с того же момента, на котором остановились в прошлый раз. Ранее мы проанализировали макет, подключили к проекту нестандартные шрифты, добавили нормализацию стилей, составили набор глобальных переменных в 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: -Free-Web-UI-designs-(Community)?type=design&node-id=0:1&mode=design&t=CzUspvuV0m0Mn8KA-1
➖ Репозиторий с кодом проекта:
➖ Статья htmlacademy “Как прятать“ (утилитарный класс visually-hidden):
➖ Форматы времени в атрибуте datetime для тега time:
💬 Чат в телеграмме (помощь новичкам):
🔸 Boosty (поддержать канал):
🗂️ Бесплатные курсы на канале:
🟠 HTML:
🔵 CSS:
🟡 JS:
🟢 A11y:
⚪️ Мастер-класс по верстке для новичков:
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS):
🗺 Frontend Roadmap 2024
📌 Автор:
➖ Личный сайт:
➖ Telegram:
➖ Boosty:
➖ GetMentor:
➖ Solvery:
#frontend #фронтенд #верстка #версткасайтов
4 views
17
7
3 months ago 00:10:33 13
[Александр Ламков — Friendly Frontend] 1. CSS для начинающих. Введение. Подключение, базовые концепции: каскад, специфичность, н
3 months ago 00:08:18 28
[Александр Ламков — Friendly Frontend] 18. Актуальность HTML-тегов и атрибутов. Сервисы caniuse и caninclude. Валидатор разметки
3 months ago 00:08:17 19
[Александр Ламков — Friendly Frontend] 17. Глобальные атрибуты HTML — class, id, title, hidden, tabindex, lang и др. Комментарии
3 months ago 00:06:10 10
[Александр Ламков — Friendly Frontend] 16. HTML векторная графика, тег svg. Как выгрузить SVG изображение из Figma
3 months ago 00:04:41 9
[Александр Ламков — Friendly Frontend] 15. Семантические теги HTML: header, main, footer, section, aside, nav и остальные. Семан
3 months ago 00:16:34 11
[Александр Ламков — Friendly Frontend] 14. Формы в HTML. Атрибуты required, disabled, readonly, placeholder, inputmode, type и a
3 months ago 00:04:42 12
[Александр Ламков — Friendly Frontend] 13. Формы в HTML. Теги textarea, select, option, optgroup
3 months ago 00:05:17 13
[Александр Ламков — Friendly Frontend] 12. HTML тег input и его вариации. Атрибут type, значения tel, email, password, url, sear
3 months ago 00:04:38 9
[Александр Ламков — Friendly Frontend] 11. HTML формы. Теги form, fieldset, legend, label и поле ввода input
3 months ago 00:06:07 1
[Александр Ламков — Friendly Frontend] 10. HTML таблицы — теги table, tr, td и th. Структурные табличные теги thead, tbody, tfoo
3 months ago 00:06:42 10
[Александр Ламков — Friendly Frontend] 9. Медиаконтент в HTML — видео, аудио, фреймы. Теги video, audio, iframe. Тег source
3 months ago 00:02:18 13
[Александр Ламков — Friendly Frontend] 8. Цитаты в HTML — теги blockquote, cite. Атрибут cite. Источник цитаты в HTML
3 months ago 00:08:17 8
[Александр Ламков — Friendly Frontend] 7. HTML изображения — тег img. Относительные и абсолютные пути
3 months ago 00:07:22 22
[Александр Ламков — Friendly Frontend] 1. HTML для начинающих. Введение — тег, анатомия тега, поток документа, вложенность, атри
6 months ago 00:16:06 1
CSS позиционирование — свойства position, top, right, bottom, left и z-index. Контекст наложения.
7 months ago 00:09:38 1
Будущее CSS-анимаций — scroll-timeline, animation-timeline и animation-range, JS больше не нужен!