Вы когда-нибудь хотели сделать свой собственный сайт, но думали, что это слишком сложно? На самом деле, создать современный лендинг на HTML и CSS может даже новичок. В этой статье я покажу, как это сделать шаг за шагом, с примерами и без лишней теории. К концу вы получите готовую страницу, которую можно использовать для своих проектов.

Что такое лендинг и зачем он нужен?

Лендинг — это одностраничный сайт, который создан для того, чтобы посетитель совершил одно конкретное действие: купил товар, подписался на рассылку или заказал услугу. Представьте, что это витрина магазина, где всё внимание направлено на один товар. Никаких лишних страниц, только суть.

Почему это круто? Лендинги быстро загружаются, их легко адаптировать под мобильные устройства, и они отлично конвертируют посетителей в клиентов. И всё это можно сделать на чистом HTML и CSS, без лишних библиотек.

Правило: Не пытайтесь объять необъятное. Лендинг — это одна страница, одна цель. Если у вас много продуктов, лучше сделать несколько лендингов, чем одну страницу с кашей.

Структура лендинга: с чего начать?

Любой лендинг состоит из нескольких ключевых блоков. Вот базовый набор, который работает почти всегда:

  • Шапка (Header) — логотип, навигация, кнопка призыва к действию (CTA).
  • Герой (Hero) — главный заголовок, подзаголовок, кнопка. Это первое, что видит пользователь.
  • Преимущества (Features) — 3-5 пунктов, почему ваш продукт крут.
  • О продукте (About) — подробное описание, возможно с изображением.
  • Отзывы (Testimonials) — социальное доказательство.
  • Цены (Pricing) — если есть тарифы.
  • Форма захвата (Form) — для сбора контактов.
  • Подвал (Footer) — контакты, ссылки, копирайт.

Не обязательно использовать все блоки. Выбирайте то, что подходит именно вашему проекту.

Пишем HTML: каркас страницы

Начнём с разметки. Вот пример базового HTML для лендинга. Обратите внимание на семантические теги: они помогают поисковикам и делают код понятнее.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой первый лендинг</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">Логотип</div>
            <nav>
                <ul>
                    <li><a href="#">Главная</a></li>
                    <li><a href="#">Преимущества</a></li>
                    <li><a href="#">Контакты</a></li>
                </ul>
            </nav>
            <a href="#" class="btn">Купить</a>
        </div>
    </header>

    <section class="hero">
        <div class="container">
            <h1>Создай свой идеальный сайт</h1>
            <p>Простой и быстрый способ заявить о себе</p>
            <a href="#" class="btn btn-primary">Начать</a>
        </div>
    </section>

    <section class="features">
        <div class="container">
            <h2>Почему мы?</h2>
            <div class="feature-list">
                <div class="feature-item">
                    <h3>Быстро</h3>
                    <p>Сайт загружается за секунды</p>
                </div>
                <div class="feature-item">
                    <h3>Красиво</h3>
                    <p>Современный дизайн</p>
                </div>
                <div class="feature-item">
                    <h3>Доступно</h3>
                    <p>Цены для любого бюджета</p>
                </div>
            </div>
        </div>
    </section>

    <section class="contact">
        <div class="container">
            <h2>Свяжитесь с нами</h2>
            <form action="#">
                <input type="text" placeholder="Ваше имя">
                <input type="email" placeholder="Email">
                <textarea placeholder="Сообщение"></textarea>
                <button type="submit" class="btn">Отправить</button>
            </form>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2025 Мой лендинг</p>
        </div>
    </footer>
</body>
</html>

В этом коде мы используем классы для стилизации. Обратите внимание на контейнер: он ограничивает ширину содержимого и центрирует его. Это базовый приём, который делает страницу аккуратной.

Стилизуем с помощью CSS: делаем красиво

Теперь добавим стили. Вот пример CSS, который превратит нашу разметку в современный лендинг. Я использую Flexbox для выравнивания и простые анимации для приятного эффекта.

/* Общие стили */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

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

/* Шапка */
header {
    background: #fff;
    padding: 20px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

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

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background: #007BFF;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.btn:hover {
    background: #0056b3;
}

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

.hero h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 20px;
    margin-bottom: 30px;
}

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

.btn-primary:hover {
    background: #f0f0f0;
}

/* Преимущества */
.features {
    padding: 80px 0;
    text-align: center;
}

.features h2 {
    margin-bottom: 40px;
}

.feature-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.feature-item {
    flex: 1;
    min-width: 250px;
    margin: 20px;
    padding: 30px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Контакты */
.contact {
    background: #f1f1f1;
    padding: 80px 0;
    text-align: center;
}

.contact form {
    max-width: 600px;
    margin: 0 auto;
}

.contact input, .contact textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.contact button {
    width: 100%;
    padding: 15px;
    background: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Подвал */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

Обратите внимание на Flexbox: он позволяет легко выравнивать элементы. Например, в шапке мы используем display: flex и justify-content: space-between, чтобы логотип был слева, навигация по центру, а кнопка справа. Это просто и эффективно.

Лайфхак: Используйте CSS-переменные для основных цветов. Например, :root { --primary: #007BFF; }. Тогда вы сможете менять цветовую схему в одном месте, а не искать по всему файлу.

Адаптивность: чтобы всё работало на телефоне

Современный лендинг обязан хорошо выглядеть на мобильных устройствах. Для этого используем медиа-запросы. Вот простой пример, который делает нашу страницу адаптивной:

/* Адаптивность */
@media (max-width: 768px) {
    header .container {
        flex-direction: column;
        text-align: center;
    }

    nav ul {
        flex-direction: column;
        margin: 20px 0;
    }

    nav ul li {
        margin: 10px 0;
    }

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

    .feature-list {
        flex-direction: column;
        align-items: center;
    }

    .feature-item {
        min-width: 90%;
    }
}

В этом коде мы меняем направление Flexbox на колонку, когда ширина экрана меньше 768 пикселей. Также уменьшаем размер шрифта для заголовка. Всё просто, но очень важно.

Таблица: сравниваем подходы к созданию лендингов

Иногда возникает вопрос: использовать ли готовые конструкторы или писать самому? Вот небольшая таблица для сравнения:

Параметр Готовые конструкторы Свой код на HTML/CSS
Скорость создания Высокая (часы) Средняя (дни)
Гибкость Низкая (ограниченные шаблоны) Высокая (всё под контролем)
Стоимость От 500 руб/мес Бесплатно (хостинг)
Знание кода Не требуется Требуется базовое

Как видите, у каждого подхода есть свои плюсы и минусы. Если вы хотите полный контроль и не боитесь учиться, свой код — отличный выбор.

Итоги: что мы узнали?

Мы прошли полный путь от идеи до готового лендинга. Вы узнали, как создать структуру HTML, стилизовать её с помощью CSS и сделать адаптивной. Теперь у вас есть база, которую можно развивать: добавлять анимации, использовать JavaScript для интерактивности или подключать PHP для обработки форм.

Главное — не бояться экспериментировать. Создайте свой первый лендинг, покажите друзьям, получите обратную связь. И помните: даже самые крутые разработчики начинали с простых страниц.

Правило: Не пытайтесь сделать идеально с первого раза. Сначала сделайте работающую версию, а потом улучшайте её. Это сэкономит кучу нервов.

Удачи в создании вашего лендинга!

Студия WNDER