День 26 | Верстаем программу обучения (с табами)

Программа обучения с табами

Сегодня мы объединим всё изученное и создадим блок программы обучения. Это реальный пример использования табов в проекте. Мы применим знания о табах из предыдущего урока и создадим красивый, функциональный блок.

Что мы создадим:

• Блок программы курса
• Табы для переключения между модулями
• Список уроков с номерами
• Визуально привлекательный дизайн
• Адаптивность для мобильных

HTML структура

<section class="program">
  <h2 class="program__title">Программа курса</h2>
  
  <div class="program-tabs">
    <div class="program-tabs__header">
      <button class="program-tab active" data-module="module1">Модуль 1</button>
      <button class="program-tab" data-module="module2">Модуль 2</button>
      <button class="program-tab" data-module="module3">Модуль 3</button>
    </div>
    
    <div class="program-tabs__content">
      <div class="program-module active" id="module1">
        <h3>Модуль 1: Основы</h3>
        <ul class="program-list">
          <li class="program-item">
            <span class="program-item__number">1</span>
            <span class="program-item__text">Введение в верстку</span>
          </li>
          <li class="program-item">
            <span class="program-item__number">2</span>
            <span class="program-item__text">HTML основы</span>
          </li>
          <li class="program-item">
            <span class="program-item__number">3</span>
            <span class="program-item__text">CSS основы</span>
          </li>
        </ul>
      </div>
      
      <div class="program-module" id="module2">
        <h3>Модуль 2: Стили</h3>
        <ul class="program-list">
          <li class="program-item">
            <span class="program-item__number">1</span>
            <span class="program-item__text">Переменные и шрифты</span>
          </li>
          <li class="program-item">
            <span class="program-item__number">2</span>
            <span class="program-item__text">Верстка header</span>
          </li>
        </ul>
      </div>
      
      <div class="program-module" id="module3">
        <h3>Модуль 3: JavaScript</h3>
        <ul class="program-list">
          <li class="program-item">
            <span class="program-item__number">1</span>
            <span class="program-item__text">Слайдер</span>
          </li>
          <li class="program-item">
            <span class="program-item__number">2</span>
            <span class="program-item__text">Табы</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

Применение знаний

В этом уроке мы применяем класс Tabs, который создали ранее. Код очень похож, но адаптирован под структуру программы обучения.

Что изменилось:

• Названия классов (program-tab вместо tab-btn)
• Атрибуты (data-module вместо data-tab)
• ID модулей (module1, module2 вместо tab1, tab2)
• Логика остаётся той же!

Это показывает силу переиспользования кода — один раз написали класс Tabs, теперь можем использовать его везде, где нужны табы.

Практическое задание

1. Создайте структуру программы обучения
2. Примените табы для переключения между модулями
3. Стилизуйте список уроков с номерами
4. Добавьте иконки и индикаторы прогресса (опционально)
5. Сделайте блок адаптивным для мобильных
6. Добавьте анимацию при переключении модулей

Итоги модуля 3

Поздравляем! Вы завершили модуль 3. Теперь вы умеете:

• ✅ Работать с DOM (получать элементы, изменять их)
• ✅ Обрабатывать события (клики, ввод текста)
• ✅ Создавать классы в JavaScript
• ✅ Создавать фильтры, слайдеры, табы, аккордеоны
• ✅ Работать с модальными окнами
• ✅ Валидировать формы

В следующем модуле мы изучим продвинутую верстку: CSS Grid, сложные макеты, и многое другое!