2. Адаптивная вёрстка лендинга с нуля. HTML, SCSS, Gulp. Проект Trail Bliss
👨🏼💻 ТГ Канал с макетом и готовым кодом: https://t.me/+9XtDDNBdHAk4Yjhi
(пост за 10.11.25) Программы ВебКадеми: 📦 HTML верстальщик: https://webcademy.ru/htmlstart
🛠️ Frontend разработчик: https://webcademy.ru/frontend
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 🌍 Сайт ВебКадеми: https://webcademy.ru
ТАЙМКОДЫ: 00:00 — Тест 00:06 — Старт трансляции, проверка звука/музыки 01:24 — Приветствие, план стрима, где взять код (Telegram), запуск Gulp 02:51 — Рекап: что сделано в части 1 (header + hero + мобильная адаптация) 04:20 — Про трансляцию в VK, чтение чата 05:20 — Вопрос из чата: почему не использовали clamp(); пробуем clamp() для заголовка, объяснение как работает функция, почему отказались здесь 10:49 — Где уместен clamp() (не только font-size, но и отступы) 11:15 — Переходим к секции с карточками (жёлтый фон): выбор названия, структура секции 12:59 — Создание feature-section.html, подключение, базовая разметка 14:52 — Подключение SCSS, фон/паддинги секции, проверка переменных цветов 16:25 — Заголовок + подзаголовок: сетка 12 колонок, размещение title/subtitle 20:17 — Исправляем сетку: grid-template-columns: repeat(12, 1fr) и grid-column 23:05 — Подключаем типовые стили title-2, subtitle-1; мобильная колонка 28:22 — Карточки: анализ типов и размеров (4/3/3/2), план по модификаторам 34:38 — Сетка для карточек: 12 колонок + gap: 24px 36:39 — Базовый стиль карточки (background: sky, border-radius:16) 38:11 — Модификаторы размеров: .feature-card--col-2/3/4 через grid-column: span N 39:15 — Контентная карточка: заголовок/описание, переиспользование типографики 41:15 — Тюним стили без !important; обсуждение подхода к переопределениям 51:39 — Карточка с фоном: структура background + content поверх 59:57 — Абсолютное позиционирование фона, overflow:hidden, z-index 1:03:25 — Модификатор content--bottom для прижатия текста вниз 1:08:18 — Псевдоэлемент-градиент для читаемости текста (снизу) 1:15:51 — Готова первая фоновая карточка 1:16:41 — Третья карточка: градиент сверху, заголовок сверху, стрелка 1:21:23 — Иконка-стрелка: абсолют, выравнивание внизу справа 1:23:40 — Контентная карточка: gap 20/12, мобильные отступы 1:25:02 — Четвёртая карточка (видео): иконка Play по центру, visual-hidden заголовок для SEO 1:27:45 — Высоты карточек: aspect-ratio, object-fit, разные кейсы 1:31:41 — Планшетная сетка: переносы, равные колонки, модификаторы для breakpoints 1:43:47 — SCSS-циклы @for для классов .col-N (desktop/tablet) 1:50:42 — Мобильные aspect-ratio и сбросы; когда лучше завести отдельные классы 1:52:26 — Вывод: иногда проще 1/2/3/4 как отдельные варианты, без сверх-универсальности 1:57:36 — Кликабельная карточка целиком: ссылка a абсолютом + лёгкий hover-оверлей 2:00:01 — Q&A: где описан контейнер, JPEG vs PNG, когда фон-картинка через CSS оправдана 2:03:49 — Почему часто достаточно HTML/CSS без React/Next (SEO, простота деплоя) 2:14:57 — Секция Mission: старт засекаем время, структура (контент слева, картинка справа) 2:19:39 — mission.scss: сетка 12 колонок, gap:24, флекс-колонка внутри контента 2:24:27 — Стили заголовка title-2 и subtitle-2, радиусы, отступы 2:28:31 — Мобилка: flex-direction: column-reverse, центровка, паддинги 2:31:42 — Эксперимент с clamp() для заголовков/подзаголовков → возвращаемся к крупным заголовкам (особенность стиля) 2:34:07 — Кнопка Start Explore: переиспользуем кнопку из Hero, делаем вариант outline 2:41:19 — SVG-спрайт: подключение symbol-спрайта, use, классы icon--*, stroke/fill 2:45:33 — Поиск и проверка символов в собранном спрайте, нюансы кеша и стилей 3:00:08 — Подтверждаем рабочий пайплайн SVG, доводим размеры/цвет через currentColor 3:04:49 — SVG-stack для многоцветных иконок (logo), отличие от symbol-спрайта 3:09:15 — Q&A: как часто используется Bootstrap (почти не используется) 3:11:10 — Финал: итоги, планы продолжения, где забрать код (Telegram), про набор на курсы
