День 37 | Адаптируем экраны под мобильные и финализация

Mobile-first подход

Mobile-first означает, что мы сначала создаём стили для мобильных устройств, а затем расширяем их для больших экранов. Это противоположность desktop-first (сначала десктоп, потом уменьшаем).

Почему mobile-first?

• Большинство пользователей заходят с мобильных
• Проще расширять, чем сжимать
• Лучше для производительности (меньше CSS для мобильных)

Базовые стили для мобильных

// Базовые стили (для мобильных)
.container {
  padding: 0 15px;
}

.cards-grid {
  grid-template-columns: 1fr; // Одна колонка
  gap: 20px;
}

.hero__title {
  font-size: 28px;
}

// Планшеты и выше
@media (min-width: 768px) {
  .container {
    padding: 0 30px;
  }
  
  .cards-grid {
    grid-template-columns: repeat(2, 1fr); // 2 колонки
  }
  
  .hero__title {
    font-size: 36px;
  }
}

// Десктоп
@media (min-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr); // 3 колонки
  }
  
  .hero__title {
    font-size: 48px;
  }
}

Разница между min-width и max-width:

• @media (min-width: 768px) — стили применяются на экранах от 768px и больше
• @media (max-width: 768px) — стили применяются на экранах до 768px

Оптимизация производительности

Минификация CSS и JS

В Vite минификация происходит автоматически при сборке для production:

// Запуск сборки для production
npm run build

// Vite автоматически минифицирует CSS и JS

Оптимизация изображений

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="...">
</picture>

Браузер выберет самый современный поддерживаемый формат.

Lazy loading

<img src="image.jpg" loading="lazy" alt="...">

Изображение загрузится только когда пользователь прокрутит до него.

Финальная проверка

1. Проверьте все интерактивные элементы
2. Протестируйте на разных устройствах
3. Оптимизируйте изображения
4. Минифицируйте CSS и JS
5. Проверьте производительность (Lighthouse в Chrome DevTools)
6. Проверьте доступность (accessibility)

Итоги курса

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

• ✅ Настраивать рабочее окружение
• ✅ Работать с Git и GitHub
• ✅ Использовать Vite и SCSS
• ✅ Верстать современные сайты
• ✅ Создавать интерактивные элементы на чистом JavaScript
• ✅ Делать сайты адаптивными
• ✅ Оптимизировать производительность

Вы готовы создавать профессиональные веб-сайты!