Адаптивная вёрстка лендинга с нуля. HTML, SCSS, Gulp. Проект Trail Bliss

👨🏼‍💻 ТГ Канал с макетом и готовым кодом: https://t.me/+9XtDDNBdHAk4Yjhi (пост за 07.11.2025)

Программы ВебКадеми:
📦 HTML верстальщик: https://webcademy.ru/htmlstart
🛠️ Frontend разработчик: https://webcademy.ru/frontend

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

🌍 Сайт ВебКадеми: https://webcademy.ru

🕒 Таймкоды

00:00 Вступление, проверка трансляции и план стрима
03:40 Голосование и выбор подхода: HTML/CSS или Gulp
05:50 Почему Gulp полезен новичкам, обсуждение формата
09:10 Как начать, если ты совсем новичок во фронтенде
14:00 Где скачать готовую gulp-сборку (ссылка в Telegram)
16:00 Установка Node.js и настройка проекта
19:30 Первая сборка: запуск Gulp, структура папок и auto-reload
32:00 Подготовка шаблона: инклюды, базовая разметка, SCSS
38:20 Цвета и шрифты из Figma, подключение Monrope
51:40 Верстаем шапку сайта: лого, навигация, кнопка
1:33:20 Кнопка в хедере и hover-эффекты
1:51:30 Блок Hero: сетка, заголовок, текст и кнопка
2:08:00 Кнопка «Start Exploring» и иконка-стрелка
2:19:00 Адаптив Hero для мобильных: изображение и layout
2:36:00 Карьерный трек: путь от HTML до Next.js
2:39:30 Финальные ответы, советы и завершение стрима

Создаём современный лендинг Travel Bliss — от чистой папки до адаптива! Подключаем Gulp, разбираем SCSS-структуру, верстаем header и hero-блок, подбираем шрифты и цвета из Figma. Подходит для новичков, которые хотят понять весь процесс верстки сайта с нуля.

Видео Адаптивная вёрстка лендинга с нуля. HTML, SCSS, Gulp. Проект Trail Bliss канала ВебКадеми | Юрий Ключевский