Перейти к содержимому
Яша.dev — Учим код

1. HTML Landing Page

Создай свою первую посадочную страницу с нуля за 1-2 часа.

Что мы построим

Заголовок раздела «Что мы построим»

Modern Landing Page для вымышленного продукта “TechFlow” — платформы для обучения программированию.

Основные секции:

  • Шапка (Header) с навигацией
  • Главный экран (Hero) с призывом к действию
  • Преимущества (Features)
  • Отзывы (Testimonials)
  • Подвал (Footer) с контактами

Что вы освоите:

  • Семантический HTML5
  • Структура лендинга
  • Формы и ссылки
  • Деплой на Netlify

Подготовка

Заголовок раздела «Подготовка»

1. Установка VS Code

Заголовок раздела «1. Установка VS Code»

VS Code — лучший редактор кода для веб-разработки.

Windows

Заголовок раздела «Windows»
  1. Перейди на code.visualstudio.com
  2. Скачай Windows Installer
  3. Запусти установщик
  4. Следуй инструкциям (оставь все галочки по умолчанию)
  5. Готово! Запусти VS Code

macOS

Заголовок раздела «macOS»
  1. Перейди на code.visualstudio.com
  2. Скачай macOS Universal
  3. Открой .zip файл
  4. Перетащи Visual Studio Code.app в папку Applications
  5. Запусти VS Code из Applications

Linux (Ubuntu/Debian)

Заголовок раздела «Linux (Ubuntu/Debian)»
Окно терминала
# Добавь репозиторий Microsoft
sudo apt update
sudo apt install software-properties-common apt-transport-https wget


wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"


# Установи VS Code
sudo apt update
sudo apt install code


# Запусти
code

2. Установка расширений (опционально)

Заголовок раздела «2. Установка расширений (опционально)»

Открой VS Code и установи эти расширения для удобства:

  1. Live Server — запуск локального сервера
    • Ctrl+P → введи ext install ritwickdey.LiveServer
  2. Auto Rename Tag — автоматическое переименование парных тегов
    • Ctrl+P → введи ext install formulahendry.auto-rename-tag
  3. Prettier — форматирование кода
    • Ctrl+P → введи ext install esbenp.prettier-vscode

3. Создание проекта

Заголовок раздела «3. Создание проекта»

  1. Создай папку для проекта:

    Окно терминала
    mkdir techflow-landing
    cd techflow-landing

  2. Открой папку в VS Code:

    • File → Open Folder → выбери techflow-landing

  3. Создай файл index.html:

    • Кликни правой кнопкой в боковой панели → New File → index.html

Шаги создания

Заголовок раздела «Шаги создания»

Шаг 1: Базовая структура HTML

Заголовок раздела «Шаг 1: Базовая структура HTML»

Начнём с минимального HTML документа.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TechFlow — платформа для обучения программированию">
    <title>TechFlow | Обучение программированию</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Добро пожаловать в TechFlow!</h1>
</body>
</html>

Что здесь:

  • <!DOCTYPE html> — говорит браузеру, что это HTML5
  • <html lang="ru"> — язык страницы (русский)
  • <meta charset="UTF-8"> — кодировка для русских букв
  • <meta name="viewport"> — адаптивность для мобильных
  • <meta name="description"> — описание для поисковиков
  • <title> — заголовок вкладки браузера

Чекпоинт: Открой файл в браузере (правой кнопкой → Open with → Chrome/Firefox). Должен увидеть заголовок “Добро пожаловать в TechFlow!”.

Шаг 2: Header (Шапка сайта)

Заголовок раздела «Шаг 2: Header (Шапка сайта)»

Добавим навигацию и логотип.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TechFlow — платформа для обучения программированию">
    <title>TechFlow | Обучение программированию</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Шапка сайта -->
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <h1>TechFlow</h1>
                </div>
                <nav>
                    <ul>
                        <li><a href="#features">Преимущества</a></li>
                        <li><a href="#testimonials">Отзывы</a></li>
                        <li><a href="#pricing">Цены</a></li>
                        <li><a href="#contact">Контакты</a></li>
                    </ul>
                </nav>
                <div class="cta-header">
                    <a href="#signup" class="btn btn-primary">Начать обучение</a>
                </div>
            </div>
        </div>
    </header>
</body>
</html>

Что добавили:

  • <header> — семантический тег для шапки
  • .container — обёртка для центрирования контента
  • .logo — логотип (пока просто текст)
  • <nav> с <ul> — навигационное меню
  • Ссылки с # — якоря для навигации по странице
  • .btn-primary — кнопка призыва к действию (CTA)

Чекпоинт: Обнови страницу. Должен увидеть логотип, меню и кнопку (пока без стилей).

Шаг 3: Hero Section (Главный экран)

Заголовок раздела «Шаг 3: Hero Section (Главный экран)»

Самая важная секция — первое, что видит посетитель.

    </header>


    <!-- Главный экран -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <h2 class="hero-title">Научись программировать<br>с TechFlow</h2>
                <p class="hero-subtitle">
                    Пошаговые курсы, реальные проекты и поддержка менторов.
                    Начни карьеру в IT за 6 месяцев.
                </p>
                <div class="hero-cta">
                    <a href="#signup" class="btn btn-large btn-primary">Начать бесплатно</a>
                    <a href="#features" class="btn btn-large btn-secondary">Узнать больше</a>
                </div>
                <div class="hero-stats">
                    <div class="stat">
                        <span class="stat-number">10,000+</span>
                        <span class="stat-label">Студентов</span>
                    </div>
                    <div class="stat">
                        <span class="stat-number">150+</span>
                        <span class="stat-label">Курсов</span>
                    </div>
                    <div class="stat">
                        <span class="stat-number">95%</span>
                        <span class="stat-label">Трудоустройство</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

Что добавили:

  • <section class="hero"> — главная секция
  • .hero-title — крупный заголовок с ценностным предложением
  • .hero-subtitle — пояснение, что именно мы предлагаем
  • .hero-cta — две кнопки (primary и secondary)
  • .hero-stats — статистика для доверия (социальное подтверждение)

Чекпоинт: Обнови страницу. Должен увидеть заголовок, подзаголовок, кнопки и статистику.

Шаг 4: Features Section (Преимущества)

Заголовок раздела «Шаг 4: Features Section (Преимущества)»

Покажем ключевые преимущества платформы.

    </section>


    <!-- Преимущества -->
    <section id="features" class="features">
        <div class="container">
            <h2 class="section-title">Почему выбирают TechFlow?</h2>
            <p class="section-subtitle">
                Всё, что нужно для успешного старта в программировании
            </p>


            <div class="features-grid">
                <!-- Feature 1 -->
                <div class="feature-card">
                    <div class="feature-icon">📚</div>
                    <h3>Структурированное обучение</h3>
                    <p>
                        Пошаговые курсы от основ до продвинутых тем.
                        Никакой воды — только практика.
                    </p>
                </div>


                <!-- Feature 2 -->
                <div class="feature-card">
                    <div class="feature-icon">💻</div>
                    <h3>Реальные проекты</h3>
                    <p>
                        Создавай приложения с первого дня.
                        Портфолио готово к концу обучения.
                    </p>
                </div>


                <!-- Feature 3 -->
                <div class="feature-card">
                    <div class="feature-icon">👨‍🏫</div>
                    <h3>Менторская поддержка</h3>
                    <p>
                        Персональный ментор, code review и помощь с трудоустройством.
                    </p>
                </div>


                <!-- Feature 4 -->
                <div class="feature-card">
                    <div class="feature-icon">🚀</div>
                    <h3>Быстрый старт карьеры</h3>
                    <p>
                        95% выпускников находят работу в течение 3 месяцев.
                        Гарантия результата.
                    </p>
                </div>


                <!-- Feature 5 -->
                <div class="feature-card">
                    <div class="feature-icon">💰</div>
                    <h3>Доступные цены</h3>
                    <p>
                        Рассрочка без процентов. Платишь после трудоустройства.
                    </p>
                </div>


                <!-- Feature 6 -->
                <div class="feature-card">
                    <div class="feature-icon">🏆</div>
                    <h3>Сертификаты</h3>
                    <p>
                        Официальные сертификаты после каждого курса.
                        Признаны работодателями.
                    </p>
                </div>
            </div>
        </div>
    </section>
</html>

Что добавили:

  • <section id="features"> — секция с преимуществами (с id для якоря)
  • .section-title и .section-subtitle — заголовки секции
  • .features-grid — сетка из 6 карточек (по 3 в ряд)
  • .feature-card — карточка с иконкой, заголовком и описанием
  • Эмодзи вместо иконок (для простоты)

Чекпоинт: Обнови страницу. Должен увидеть 6 карточек преимуществ.

Шаг 5: Testimonials Section (Отзывы)

Заголовок раздела «Шаг 5: Testimonials Section (Отзывы)»

Покажем отзывы реальных студентов.

    </section>


    <!-- Отзывы -->
    <section id="testimonials" class="testimonials">
        <div class="container">
            <h2 class="section-title">Что говорят студенты?</h2>
            <p class="section-subtitle">
                Более 10,000 человек уже изменили свою карьеру с TechFlow
            </p>


            <div class="testimonials-grid">
                <!-- Testimonial 1 -->
                <div class="testimonial-card">
                    <div class="testimonial-rating">⭐⭐⭐⭐⭐</div>
                    <p class="testimonial-text">
                        "Прошёл курс по JavaScript за 3 месяца.
                        Уже работаю в IT-компании на позиции Junior Developer.
                        Спасибо TechFlow за структурированную программу!"
                    </p>
                    <div class="testimonial-author">
                        <div class="author-avatar">АС</div>
                        <div class="author-info">
                            <div class="author-name">Алексей Смирнов</div>
                            <div class="author-role">Junior Developer</div>
                        </div>
                    </div>
                </div>


                <!-- Testimonial 2 -->
                <div class="testimonial-card">
                    <div class="testimonial-rating">⭐⭐⭐⭐⭐</div>
                    <p class="testimonial-text">
                        "Никогда не думала, что смогу стать программистом.
                        Менторы TechFlow помогли разобраться с React и найти первую работу.
                        Зарплата выросла в 3 раза!"
                    </p>
                    <div class="testimonial-author">
                        <div class="author-avatar">МП</div>
                        <div class="author-info">
                            <div class="author-name">Мария Петрова</div>
                            <div class="author-role">Frontend Developer</div>
                        </div>
                    </div>
                </div>


                <!-- Testimonial 3 -->
                <div class="testimonial-card">
                    <div class="testimonial-rating">⭐⭐⭐⭐⭐</div>
                    <p class="testimonial-text">
                        "Лучшая инвестиция в себя. Реальные проекты, поддержка и карьерные консультации.
                        Сейчас работаю на удалёнке в зарубежной компании."
                    </p>
                    <div class="testimonial-author">
                        <div class="author-avatar">ИК</div>
                        <div class="author-info">
                            <div class="author-name">Иван Ковалёв</div>
                            <div class="author-role">Full-stack Developer</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</html>

Что добавили:

  • .testimonials-grid — сетка из 3 отзывов
  • .testimonial-card — карточка отзыва
  • .testimonial-rating — звёзды (эмодзи)
  • .testimonial-text — текст отзыва
  • .testimonial-author — автор с аватаром и ролью
  • .author-avatar — заглушка аватара (инициалы)

Чекпоинт: Обнови страницу. Должен увидеть 3 отзыва с рейтингом и авторами.

Шаг 6: Pricing Section (Цены)

Заголовок раздела «Шаг 6: Pricing Section (Цены)»

Простая секция с призывом к действию.

    </section>


    <!-- Цены и CTA -->
    <section id="pricing" class="pricing">
        <div class="container">
            <div class="pricing-content">
                <h2 class="section-title">Готов начать обучение?</h2>
                <p class="pricing-subtitle">
                    Первые 7 дней бесплатно. Никаких обязательств. Отмена в любое время.
                </p>
                <div class="pricing-options">
                    <div class="price-card">
                        <h3>Базовый</h3>
                        <div class="price">
                            <span class="price-amount">1,990₽</span>
                            <span class="price-period">/месяц</span>
                        </div>
                        <ul class="price-features">
                            <li>✅ Доступ ко всем курсам</li>
                            <li>✅ Проверка домашних заданий</li>
                            <li>❌ Персональный ментор</li>
                            <li>❌ Помощь с трудоустройством</li>
                        </ul>
                        <a href="#signup" class="btn btn-secondary">Выбрать план</a>
                    </div>


                    <div class="price-card price-card-featured">
                        <div class="badge">Популярный</div>
                        <h3>Профессиональный</h3>
                        <div class="price">
                            <span class="price-amount">4,990₽</span>
                            <span class="price-period">/месяц</span>
                        </div>
                        <ul class="price-features">
                            <li>✅ Доступ ко всем курсам</li>
                            <li>✅ Проверка домашних заданий</li>
                            <li>✅ Персональный ментор</li>
                            <li>✅ Помощь с трудоустройством</li>
                        </ul>
                        <a href="#signup" class="btn btn-primary">Выбрать план</a>
                    </div>


                    <div class="price-card">
                        <h3>Корпоративный</h3>
                        <div class="price">
                            <span class="price-amount">Договорная</span>
                        </div>
                        <ul class="price-features">
                            <li>✅ Обучение команды</li>
                            <li>✅ Кастомные курсы</li>
                            <li>✅ Корпоративный аккаунт</li>
                            <li>✅ Приоритетная поддержка</li>
                        </ul>
                        <a href="#contact" class="btn btn-secondary">Связаться</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</html>

Что добавили:

  • .pricing-options — сетка из 3 тарифов
  • .price-card — карточка тарифа
  • .price-card-featured — выделенный тариф (популярный)
  • .badge — бейдж “Популярный”
  • .price-features — список функций с эмодзи (✅/❌)

Чекпоинт: Обнови страницу. Должен увидеть 3 тарифа.

Заголовок раздела «Шаг 7: Footer (Подвал)»

Завершим страницу контактами и ссылками.

    </section>


    <!-- Подвал -->
    <footer id="contact" class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>TechFlow</h3>
                    <p>Платформа для обучения программированию. Начни карьеру в IT уже сегодня.</p>
                    <div class="footer-social">
                        <a href="#" class="social-link">Telegram</a>
                        <a href="#" class="social-link">YouTube</a>
                        <a href="#" class="social-link">GitHub</a>
                    </div>
                </div>


                <div class="footer-column">
                    <h4>Обучение</h4>
                    <ul>
                        <li><a href="#">Все курсы</a></li>
                        <li><a href="#">Roadmap</a></li>
                        <li><a href="#">Проекты</a></li>
                        <li><a href="#">Сертификаты</a></li>
                    </ul>
                </div>


                <div class="footer-column">
                    <h4>Компания</h4>
                    <ul>
                        <li><a href="#">О нас</a></li>
                        <li><a href="#">Менторы</a></li>
                        <li><a href="#">Карьера</a></li>
                        <li><a href="#">Блог</a></li>
                    </ul>
                </div>


                <div class="footer-column">
                    <h4>Поддержка</h4>
                    <ul>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">Контакты</a></li>
                        <li><a href="#">Политика конфиденциальности</a></li>
                        <li><a href="#">Условия использования</a></li>
                    </ul>
                </div>
            </div>


            <div class="footer-bottom">
                <p>&copy; 2026 TechFlow. Все права защищены.</p>
            </div>
        </div>
    </footer>
</body>
</html>

Что добавили:

  • .footer-content — сетка из 4 колонок
  • .footer-column — колонка с заголовком и ссылками
  • .footer-social — соцсети
  • .footer-bottom — копирайт

Чекпоинт: Обнови страницу. Должен увидеть footer с 4 колонками.

Стили (CSS)

Заголовок раздела «Стили (CSS)»

Теперь добавим стили. Создай файл styles.css в той же папке.

/* Reset и базовые стили */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
}


.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/* Header */
header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}


.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}


.logo h1 {
    font-size: 24px;
    color: #6366f1;
}


nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}


nav a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s;
}


nav a:hover {
    color: #6366f1;
}


/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}


.btn-primary {
    background: #6366f1;
    color: #fff;
}


.btn-primary:hover {
    background: #4f46e5;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
}


.btn-secondary {
    background: transparent;
    border: 2px solid #6366f1;
    color: #6366f1;
}


.btn-secondary:hover {
    background: #6366f1;
    color: #fff;
}


.btn-large {
    padding: 16px 32px;
    font-size: 18px;
}


/* Hero Section */
.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 100px 0;
    text-align: center;
}


.hero-title {
    font-size: 48px;
    margin-bottom: 20px;
    line-height: 1.2;
}


.hero-subtitle {
    font-size: 20px;
    margin-bottom: 40px;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


.hero-cta {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 60px;
}


.hero-stats {
    display: flex;
    gap: 60px;
    justify-content: center;
}


.stat {
    display: flex;
    flex-direction: column;
}


.stat-number {
    font-size: 36px;
    font-weight: 700;
}


.stat-label {
    font-size: 14px;
    opacity: 0.8;
}


/* Features Section */
.features {
    padding: 80px 0;
    background: #f9fafb;
}


.section-title {
    font-size: 36px;
    text-align: center;
    margin-bottom: 10px;
}


.section-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 60px;
    font-size: 18px;
}


.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


.feature-card {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}


.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}


.feature-icon {
    font-size: 48px;
    margin-bottom: 20px;
}


.feature-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}


.feature-card p {
    color: #666;
    line-height: 1.6;
}


/* Testimonials Section */
.testimonials {
    padding: 80px 0;
}


.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


.testimonial-card {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}


.testimonial-rating {
    font-size: 20px;
    margin-bottom: 15px;
}


.testimonial-text {
    color: #333;
    margin-bottom: 20px;
    font-style: italic;
    line-height: 1.6;
}


.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}


.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #6366f1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}


.author-name {
    font-weight: 600;
    color: #333;
}


.author-role {
    font-size: 14px;
    color: #666;
}


/* Pricing Section */
.pricing {
    padding: 80px 0;
    background: #f9fafb;
}


.pricing-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 60px;
    font-size: 18px;
}


.pricing-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


.price-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    text-align: center;
    position: relative;
}


.price-card-featured {
    border: 3px solid #6366f1;
    transform: scale(1.05);
}


.badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #6366f1;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}


.price-card h3 {
    font-size: 24px;
    margin-bottom: 20px;
}


.price {
    margin-bottom: 30px;
}


.price-amount {
    font-size: 36px;
    font-weight: 700;
    color: #6366f1;
}


.price-period {
    color: #666;
    font-size: 16px;
}


.price-features {
    list-style: none;
    margin-bottom: 30px;
    text-align: left;
}


.price-features li {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}


/* Footer */
.footer {
    background: #1f2937;
    color: #fff;
    padding: 60px 0 20px;
}


.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}


.footer-column h3,
.footer-column h4 {
    margin-bottom: 20px;
}


.footer-column p {
    color: #9ca3af;
    line-height: 1.6;
}


.footer-column ul {
    list-style: none;
}


.footer-column ul li {
    margin-bottom: 10px;
}


.footer-column a {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.3s;
}


.footer-column a:hover {
    color: #fff;
}


.footer-social {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}


.social-link {
    display: inline-block;
    padding: 8px 16px;
    background: #374151;
    border-radius: 6px;
    color: #fff !important;
    text-decoration: none;
    transition: background 0.3s;
}


.social-link:hover {
    background: #6366f1;
}


.footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 20px;
    text-align: center;
    color: #9ca3af;
}


/* Responsive */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 20px;
    }


    nav ul {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }


    .hero-title {
        font-size: 32px;
    }


    .hero-cta {
        flex-direction: column;
        align-items: center;
    }


    .hero-stats {
        flex-direction: column;
        gap: 20px;
    }


    .features-grid,
    .testimonials-grid,
    .pricing-options {
        grid-template-columns: 1fr;
    }


    .footer-content {
        grid-template-columns: 1fr;
    }
}

Чекпоинт: Обнови страницу. Теперь всё должно выглядеть красиво и профессионально!

Деплой на Netlify

Заголовок раздела «Деплой на Netlify»

Опубликуем лендинг бесплатно за 5 минут.

Шаг 1: Регистрация на Netlify

Заголовок раздела «Шаг 1: Регистрация на Netlify»
  1. Перейди на netlify.com
  2. Кликни Sign Up
  3. Выбери регистрацию через GitHub (или Email)
  4. Подтверди email

Шаг 2: Деплой через Drag & Drop

Заголовок раздела «Шаг 2: Деплой через Drag & Drop»

Простой способ (без Git):

  1. Открой app.netlify.com
  2. В секции “Sites” увидишь область с текстом “Want to deploy a new site without connecting to Git? Drag and drop your site output folder here”
  3. Перетащи папку techflow-landing прямо туда
  4. Подожди 10-20 секунд
  5. Готово! Netlify даст тебе уникальный URL типа https://random-name-12345.netlify.app

Шаг 3: Кастомное имя (опционально)

Заголовок раздела «Шаг 3: Кастомное имя (опционально)»
  1. Кликни на сайт в списке
  2. Site settings → Change site name
  3. Введи своё имя (например, techflow-landing)
  4. Сохрани
  5. Теперь сайт доступен по адресу https://techflow-landing.netlify.app

Шаг 4: Обновления

Заголовок раздела «Шаг 4: Обновления»

Чтобы обновить сайт:

  1. Открой сайт в Netlify
  2. Deploys → Drag and drop
  3. Перетащи обновленную папку

Или используй Netlify CLI (продвинутый способ):

Окно терминала
# Установи Netlify CLI
npm install -g netlify-cli


# Войди в аккаунт
netlify login


# Деплой
netlify deploy --prod

Playground

Заголовок раздела «Playground»

Попробуй изменить лендинг:

<!-- Поменяй цвет gradient в Hero -->
<style>
.hero {
    /* Попробуй эти градиенты: */
    /* background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); */
    /* background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); */
    /* background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); */
}
</style>

Идеи для экспериментов:

  • Замени эмодзи иконки на SVG из heroicons.com
  • Добавь анимации при скролле (AOS library)
  • Создай мобильное меню (hamburger menu)
  • Добавь форму подписки в Footer

Проблемы и решения

Заголовок раздела «Проблемы и решения»

Проблема: Ссылки в меню не работают

Заголовок раздела «Проблема: Ссылки в меню не работают»

Решение: Убедись, что у секций есть правильные id:

<section id="features">  <!-- id совпадает с href="#features" -->

Проблема: Страница не адаптивна на мобильных

Заголовок раздела «Проблема: Страница не адаптивна на мобильных»

Решение: Проверь наличие viewport meta:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Проблема: Стили не применяются

Заголовок раздела «Проблема: Стили не применяются»

Решение:

  1. Проверь, что файл styles.css в той же папке, что и index.html
  2. Проверь путь в <link>: 
    <link rel="stylesheet" href="styles.css">
  3. Открой DevTools (F12) → Console — ищи ошибки

Следующие шаги

Заголовок раздела «Следующие шаги»

Поздравляю! Ты создал свой первый лендинг 🎉

Что дальше:

  • Добавь JavaScript для интерактивности (smooth scroll, mobile menu)
  • Интегрируй форму подписки (Mailchimp, ConvertKit)
  • Подключи Google Analytics для аналитики
  • Улучши SEO (meta tags, Open Graph)
  • Добавь анимации (Framer Motion, GSAP)

Следующий проект: CSS Portfolio — создай портфолио с адаптивным дизайном и темной темой.