Проект «Пинк»

Учебный проект, реализованный во время обучения на курсе HTML Academy по вёрстке.

Изначально разрабатывался с помощью Gulp 4.0 в Node.js 12. После окончания курса скрипты сборки были донастроены, часть инструментов (сжатие изображений, минификация файлов, etc.) была обновлена на более актуальные ко времени Node.js 16; также был настроен github-action для автоматической развёртки на github-pages и добавлен js-функционал (дополнительная интерактивность, загрузка данных).

---

Разработка

• Установка зависимостей: npm install
• Сборка: npm run build
• Запуск локального сервера: npm start

Техническое задание

Общие требования

1. Сетка: определена в макете.
2. Адаптивность сетки: мобильная, планшетная и десктопная версии.
3. Адаптивность графики: ретинизация, векторные изображения.
4. Используемая методология: БЭМ.
5. Используемый препроцессор: Sass.
6. Используемый инструмент автоматизации: Gulp.
7. Используемые библиотеки: нет.
8. Кроссбраузерность: Chrome, Firefox, Safari.
9. Типографика: частично определена в макете (прочее — на усмотрение разработчика).
10. Используемый шрифт: Open Sans.

• Разметка семантическая.
• Вёрстка адаптивная, mobile-first — брейкпоинты: 320px, 660px, 960px.
• Оптимизация:
  • WebP
  • векторный спрайт
  • предзагрузка шрифтов и изображений

Дизайн

• Видео-обзор проекта на youtube:

  

---

Репозиторий создан в рамках обучения на профессиональном онлайн‑курсе «HTML и CSS. Адаптивная вёрстка и автоматизация» от HTML Academy.