Проект создан в рамках Акселератора HTML Academy.
Акселератор HTML Academy — имитатор реальной командной работы над проектом.
-
Разработчик: Роман Демин
-
Куратор проектов Акселератора: Софья Дышпан
-
Менеджер проекта Акселератор: Наташа Мизикевич
-
Наставник: Юрий Мамаев
-
Тестировщик: Евгения Рябикова
- Стандарты вёрстки: HTML5, CSS3, прогрессивное улучшение.
- Раскладка блоков на странице делается с помощью флексбоксов.
- Адаптивность сетки: мобильная, планшетная и десктопная версии по принципу Desktop First. На всех промежуточных разрешениях используется резиновая вёрстка.
- Методология: БЭМ.
- Фреймворки: не используются.
- Препроцессор: SCSS.
- Инструмент автоматизации: Gulp.
- Кроссбраузерность: Chrome, Firefox, Safari.
- Нестандартные шрифты подключены локально.
- JavaScript: модальные окна с формой, слайдер, главное меню сайта. Важно: меню должны быть работоспособным при отключенном JavaScript!
- Система управления версиями: Git
- Папка build со всем её содержимым должна попадать в репозиторий на github.
- Формат наименования изображений:
-
в составном названии файла отдельные слова отделены тире (dash-case)
-
префикс: сокращенное или полное название страницы сайта
cat_
(catalog) илиcatalog_
-
префикс вставляется при необходимости, если дублируются названия изображений но изображения имеют разные размеры
-
постфикс: содержит параметры дисплея
- '_desk' - desktop
- '_tab' - tablet
- '_mob' - mobile
- '@1x' - дисплей обычной плотности пикселей
- '@2x' - retina дисплей (двойная плотность и выше)
Пример
-
Все проекты реализуются в соответствии с критериями качества.
-
Адаптивная, семантическая верстка страниц: главная (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
- Проверьте корректность установки Node и NPM:
- 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