10. Мини-проект: Лендинг

Мини-проект: Лендинг ITspecialist

Лендинг — это одностраничный сайт, цель которого привлечь внимание и познакомить пользователя с проектом. В этом уроке мы создадим простой, но современный лендинг для проекта ITspecialist, используя только HTML и Bootstrap.

После этого урока у тебя будет свой первый мини-сайт, который можно загрузить на хостинг и показать друзьям!

Структура проекта

Перед началом убедись, что у тебя есть:

• Созданная папка проекта, например,

  landing/

• Файл

  index.html

• Подключён Bootstrap (через CDN).

Подключение Bootstrap

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

1. Шапка сайта (Header)

Начнём с верхней секции — заголовка и кнопки призыва к действию.

<header class="py-5 bg-dark text-light text-center">
  <div class="container">
    <h1 class="display-5 fw-bold">ITspecialist</h1>
    <p class="lead text-secondary">Бесплатные курсы программирования</p>
    <a href="#courses" class="btn btn-primary rounded-pill px-4">Начать</a>
  </div>
</header>

Что здесь происходит:

• .py-5

  — отступы сверху и снизу.

• .bg-dark.text-light

  — тёмный фон и светлый текст.

• .rounded-pill

  — кнопка с плавными краями.

2. Раздел «О проекте»

Теперь добавим секцию, объясняющую суть сайта.

<section id="about" class="py-5 bg-light text-center">
  <div class="container">
    <h2 class="fw-bold mb-4">О проекте</h2>
    <p class="lead mb-5">ITspecialist — это открытая платформа для изучения программирования. Все курсы бесплатны, доступны онлайн и созданы с любовью к IT.</p>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="p-4 bg-white shadow-sm rounded-4 h-100">
          <h5 class="fw-semibold"> Практика</h5>
          <p>Каждый курс содержит реальные примеры, мини-проекты и задания.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4 bg-white shadow-sm rounded-4 h-100">
          <h5 class="fw-semibold">Актуальность</h5>
          <p>Курсы обновляются и соответствуют современным технологиям.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4 bg-white shadow-sm rounded-4 h-100">
          <h5 class="fw-semibold">Доступность</h5>
          <p>Обучайся бесплатно из любой точки мира — нужен только браузер!</p>
        </div>
      </div>
    </div>
  </div>
</section>

Объяснение:

• .row.g-4

  — сетка с отступами между колонками.

• .shadow-sm

  — лёгкая тень для карточек.

• .rounded-4

  — скруглённые углы.

3. Раздел «Курсы»

Создадим блок с карточками курсов, как на реальном сайте.

<section id="courses" class="py-5 bg-dark text-light">
  <div class="container text-center">
    <h2 class="fw-bold mb-4 text-gradient">Популярные курсы</h2>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="card bg-secondary text-light h-100 shadow-sm border-0">
          <div class="card-body">
            <h5 class="card-title">Python для начинающих</h5>
            <p class="card-text">Изучите синтаксис, функции и работу с файлами.</p>
            <a href="#" class="btn btn-outline-light btn-sm rounded-pill">Открыть</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card bg-secondary text-light h-100 shadow-sm border-0">
          <div class="card-body">
            <h5 class="card-title">HTML + CSS + Bootstrap</h5>
            <p class="card-text">Создавайте адаптивные сайты с нуля.</p>
            <a href="#" class="btn btn-outline-light btn-sm rounded-pill">Открыть</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card bg-secondary text-light h-100 shadow-sm border-0">
          <div class="card-body">
            <h5 class="card-title">JavaScript для веба</h5>
            <p class="card-text">Делайте сайты интерактивными и динамичными.</p>
            <a href="#" class="btn btn-outline-light btn-sm rounded-pill">Открыть</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

4. Галерея изображений

Добавим адаптивную галерею с использованием

.img-fluid

<section class="py-5 bg-light">
  <div class="container text-center">
    <h2 class="fw-bold mb-4">Фотогалерея</h2>
    <div class="row g-3">
      <div class="col-6 col-md-3">
        <img src="https://via.placeholder.com/300x200" class="img-fluid rounded" alt="Фото 1">
      </div>
      <div class="col-6 col-md-3">
        <img src="https://via.placeholder.com/300x200" class="img-fluid rounded" alt="Фото 2">
      </div>
      <div class="col-6 col-md-3">
        <img src="https://via.placeholder.com/300x200" class="img-fluid rounded" alt="Фото 3">
      </div>
      <div class="col-6 col-md-3">
        <img src="https://via.placeholder.com/300x200" class="img-fluid rounded" alt="Фото 4">
      </div>
    </div>
  </div>
</section>

5. Футер сайта

Добавим подвал с контактами и ссылками.

<footer class="py-4 bg-dark text-light text-center border-top border-secondary">
  <div class="container">
    <p class="mb-1">© 2025 ITspecialist</p>
    <p class="text-secondary small mb-0">Создано с ❤️ для тех, кто хочет учиться программировать.</p>
  </div>
</footer>

Итоги проекта

Теперь у вас есть полноценный лендинг с:

• Шапкой и кнопкой призыва к действию.
• Разделами «О проекте» и «Курсы».
• Галереей изображений.
• Футером с подписями и контактами.

Итоговая структура сайта:

index.html
└── Bootstrap (через CDN)
    ├── Header
    ├── About
    ├── Courses
    ├── Gallery
    └── Footer

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

Попробуйте:

• Добавить анимации (например, библиотеку AOS или animate.css).
• Заменить фон на градиент или изображение.
• Вынести стили в отдельный файл

  style.css

• Сделать кнопку «Наверх» и плавную прокрутку.

Поздравляем — вы создали свой первый адаптивный лендинг на Bootstrap!