Урок 8. Практический проект: создание Landing Page с нуля
В этом уроке вы увидите реальный результат: профессиональный landing page, созданный с помощью ИИ с нуля. Hero-секция, преимущества, тарифы, FAQ и footer — всё адаптивное и в современном дизайне. Это будет ваш первый проект-портфолио.
Описание темы
Landing page (лендинг) — одностраничный сайт, который служит одной цели: побудить пользователя к действию (нажать кнопку, заполнить форму, купить). Это основной маркетинговый инструмент бизнеса.
Традиционным способом создание лендинга занимает 3-7 дней: дизайн (Figma), фронтенд (HTML/CSS/JS), адаптивность (мобильная вёрстка), деплой (хостинг). С вайб-кодингом это можно сделать за 1-2 часа — ИИ выполняет всю техническую работу.
В этом уроке мы пошагово: 1) Создаём структуру проекта, 2) Hero-секцию, 3) Блок преимуществ, 4) Таблицу тарифов, 5) FAQ-аккордеон, 6) Footer, 7) Адаптивность под мобильные, 8) Деплой. На каждом этапе работаем с ИИ.
Технология: HTML + CSS + JavaScript (без фреймворков). Это самый простой и быстрый вариант. В следующих уроках вы также изучите React и Next.js. Сейчас цель — увидеть результат и понять процесс.
Что вы получите из этого урока
- Создание профессионального landing page с нуля
- Правильное описание требований к дизайну и макету для ИИ
- Реализация адаптивного дизайна (мобильный + десктоп) с помощью ИИ
- Освоение итеративного подхода — пошаговое улучшение
- Размещение готового сайта в интернете (деплой)
Углублённое объяснение
При создании landing page главное — чёткое направление для пользователя. Каждый блок ведёт пользователя вниз (scroll) и к действию (CTA — Call to Action). ИИ знает эту структуру, но вам нужно чётко указать: какая кнопка главная, какой текст должен бросаться в глаза первым.
Адаптивный дизайн — правильное отображение страницы на разных размерах экрана. Mobile-first подход: сначала дизайн для экрана 320-375px, потом для планшета (768px) и десктопа (1024px+). ИИ пишет CSS media queries, но вам нужно проверять результат в DevTools на разных размерах.
Варианты деплоя: 1) Netlify Drop — простейший, перетаскиваете папку в браузер и за 30 секунд сайт готов. 2) Vercel — связь с GitHub, автоматический деплой при каждом push. 3) GitHub Pages — бесплатно, но только для статических сайтов. Для начинающих Netlify Drop — лучший выбор.
Итеративный подход на практике: с первым промптом вы получаете 70-80% результата. Затем 3-5 дополнительных промптов для улучшений: 'измени градиент', 'добавь анимацию при открытии FAQ', 'добавь hover-эффект кнопке'. Это нормально — профессионалы тоже так работают. Не ждите идеала с первого раза.
Готовый шаблон промпта
Скопируйте и адаптируйтеСоздай профессиональный landing page. Тема: платформа AI-курсов. Состав страницы: 1) Hero: заголовок 'Строй будущее с ИИ', краткое описание, кнопка 'Начать', 2) Преимущества: 4 карточки (бесплатно, практика, на русском, сертификат), 3) Тарифы: 3 плана (бесплатный, pro, premium), 4) FAQ: 5 вопросов-ответов аккордеон, 5) Footer: логотип, соцсети, copyright. Дизайн: dark theme, градиентный акцент, шрифт Inter, mobile-first responsive.
Почему это работает
Тема: 'платформа AI-курсов' — ИИ адаптирует контент под тему
Структура: 5 блоков перечислены чётко — ИИ знает последовательность
Контент: указано что должно быть в каждом блоке
Дизайн: 'dark theme, gradient, Inter font, mobile-first' — визуальные правила
Адаптивность: 'mobile-first' — сначала мобильная, потом десктоп-версия
Практическое задание
- Создайте новую папку: 'my-landing-page'
- В Cursor Agent mode (Cmd+I) введите промпт выше
- Наблюдайте как Agent создаёт файлы и принимайте (Accept)
- Откройте index.html в браузере — посмотрите результат
- Если что-то не нравится — в Chat (Cmd+L) попросите изменить: 'Сделай кнопку в Hero крупнее и измени цвет градиента'
- Проверьте мобильный вид через DevTools браузера (F12) — включите режим телефона
- Загрузите папку на Netlify Drop (app.netlify.com/drop) для деплоя
Частые ошибки
- Ожидать идеальный результат с первого раза — вайб-кодинг итеративен: создать → посмотреть → улучшить → повторить
- Забыть про мобильную адаптивность — 70%+ трафика с мобильных устройств, всегда проверяйте
- Не указывать требования к дизайну — не 'сделай сайт', а конкретные цвета, шрифт, макет
- Не делать деплой — сайт только на вашем компьютере недостаточно, размещайте в интернете
- Игнорировать SEO — title, meta description, alt-тексты важны
Вопросы и ответы по уроку
Сколько времени занимает создание landing page?
С вайб-кодингом 30-60 минут. Традиционным способом 3-7 дней. Основное время уходит на выбор дизайна и доработку контента — написание кода ИИ берёт на себя за 5 минут.
Обязательно ли использовать фреймворк (React, Vue)?
Для простого лендинга — нет. HTML + CSS + JavaScript достаточно и это самый быстрый вариант. Фреймворки нужны для крупных проектов (10+ страниц, динамический контент).
Что нужно для SEO?
Попросите ИИ: 'Используй title, meta description, иерархию заголовков (h1→h2→h3), alt-тексты и семантический HTML'. Cursor хорошо это знает.
Хостинг бесплатный?
Да, на Netlify и Vercel есть бесплатные планы — 100GB трафика в месяц и неограниченное количество статических сайтов. Для обычного лендинга полностью достаточно.