Адаптивная вёрстка лендинга с нуля. 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. Подходит для новичков, которые хотят понять весь процесс верстки сайта с нуля.
