Сайт в интернете

Проект создан в рамках Акселератора HTML Academy.

Акселератор HTML Academy — имитатор реальной командной работы над проектом.

• Разработчик: Роман Демин

• Куратор проектов Акселератора: Софья Дышпан

• Менеджер проекта Акселератор: Наташа Мизикевич

• Наставник: Юрий Мамаев

• Тестировщик: Евгения Рябикова

1. Стандарты вёрстки: HTML5, CSS3, прогрессивное улучшение.
2. Раскладка блоков на странице делается с помощью флексбоксов.
3. Адаптивность сетки: мобильная, планшетная и десктопная версии по принципу Desktop First. На всех промежуточных разрешениях используется резиновая вёрстка.
4. Методология: БЭМ.
5. Фреймворки: не используются.
6. Препроцессор: SCSS.
7. Инструмент автоматизации: Gulp.
8. Кроссбраузерность: Chrome, Firefox, Safari.
9. Нестандартные шрифты подключены локально.
10. JavaScript: модальные окна с формой, слайдер, главное меню сайта. Важно: меню должны быть работоспособным при отключенном JavaScript!
11. Система управления версиями: Git
    • Папка build со всем её содержимым должна попадать в репозиторий на github.
12. Формат наименования изображений:

    • в составном названии файла отдельные слова отделены тире (dash-case)

    • префикс: сокращенное или полное название страницы сайта cat_ (catalog) или catalog_

    • префикс вставляется при необходимости, если дублируются названия изображений но изображения имеют разные размеры

    • постфикс: содержит параметры дисплея

      • '_desk' - desktop
      • '_tab' - tablet
      • '_mob' - mobile
      • '@1x' - дисплей обычной плотности пикселей
      • '@2x' - retina дисплей (двойная плотность и выше)

      Пример

      [email protected]
      

Все проекты реализуются в соответствии с критериями качества.

• Адаптивная, семантическая верстка страниц: главная (index.html) и каталога (catalog.html)

• Из макета в редакторе Figma извлечены параметры шрифтов, цвета, фоны, текст, svg-иконки и изображения.

• C использованием JavaScript реализовано:

  • главное меню в мобильной и планшетной версии сайта
  • содержимое поля "Your E-mail", заполненное пользователем сохраняется в localStorage
  • модальное окно с формой входа и регистрации аккаунта
  • интерактивные элементы:
    • аккордеон для раздела FAQ на главной странице
    • аккордеон для формы-фильтра ранжирования товаров в каталоге

• Слайдер: подключен, стилизован и настроен Swiper

• Автоматизирована система сжатия изображений и сборки сайта с использованием Gulp.

Установите

• Node.js - последнюю версию LTS
• NPM - установка включена в установку Node.js
  • Проверьте корректность установки Node и NPM:

        node --version
        npm --version

• Gulp-cli - v4.x:

      npm install --global gulp-cli

  • Проверьте корректность установки Gulp:

      gulp --version

• Запустите терминал из корневой директории проекта
• Установите npm-пакеты плагинов сборки и тестирования (devDependencies из файла package.json)

      npm i

• Протестируйте код на соответствия style-guides

      npm test

• Соберите проект без запуска локального сервера

      npm run build

• Запустите локальный сервер

      npm start