Верстка макета з Figma

Загальні характеристики проекту:

- Макет сверстано з використанням адаптивного підходу, що забезпечує коректне відображення на пристроях з різним розширенням.
- Для структуризації та спрощення розробки використано фреймворк Bootstrap.
- GULP використовується як таск-менеджер для автоматизації завдань, включаючи компіляцію SCSS, мініфікацію файлів, оптимізацію зображень та запуск локального сервера.
- Основний стиль описано за допомогою SCSS, що дозволило ефективно організувати код, використовуючи змінні, міксини та вкладеність.


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

- HTML-файли структуровані з семантичними тегами (header, main, section, footer тощо), щоб покращити читабельність та SEO.
- Файлова структура організована за принципом BEM (Block Element Modifier), що спрощує підтримку та масштабованість проекту.
- Підключення та кастомізація Bootstrap здійснюється через SCSS, що дозволяє використовувати змінні Bootstrap для налаштування стилів.


Особливості верстки:

- Сітка: Використано стандартну 12-колонкову сітку Bootstrap для розмітки контенту. Грид-система адаптована для макету.
- Типографіка: Шрифти підключені через Google Fonts або інші сервіси, стилізацію текстових елементів налаштовано через SCSS (використовуючи змінні та міксини).
- Модульні стилі: Кожен компонент (наприклад, кнопки, картки, форми) має окремий SCSS-файл. Усі стилі імпортуються в загальний файл main.scss, що компілюється в CSS.
- Змінні: Створено файл _variables.scss для управління кольоровою палітрою, шрифтами та іншими глобальними параметрами.


Функціональність GULP:

- Автоматизовано:
- - Компіляція SCSS в CSS.
- - Мініфікація CSS, HTML та JS.
- - Оптимізація зображень (стиснення без втрати якості).
- - Оновлення браузера в режимі реального часу через BrowserSync.
- Налаштовано watch-скрипт, що відстежує зміни у файлах та автоматично пересобирає проект.


Особливості адаптивності:

- Використовуються медіа-запити в SCSS для адаптації стилів під різні розширення екранів. Основні точки зупинки базуються на Breakpoints Bootstrap.