Проект: тестовое задание для компании Media Works

---

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

• Профиль на htmlacademy.ru
• CV на career.habr.com

---

Ссылка на Github Pages Авто Лизинг

---

Задача

• Сверстать макет страницы по методологии БЭМ и сделать адаптив
• Использовать препроцессор SCSS
• При нажатии на кнопку Войти должна открываться форма авторизации
• По завершении загрузить на Github Pages
• анимировать появление и исчезновение формы авторизации

---

Общие технические требования

1. Стандарты вёрстки: HTML5, CSS3
2. Семантически правильная вёрстка (каждый html-элемент используется осмысленно и по назначению)
3. Адаптивность сетки: мобильная, планшетная и десктопная версии по принципу Desktop First На всех промежуточных разрешениях используется резиновая вёрстка
4. Методология: БЭМ
5. Фреймворки и сторонние библиотеки: не используются
6. Препроцессор: SCSS
7. Инструмент автоматизации: Gulp
8. Нестандартные шрифты подключены локально.
9. Модальное окно с формой авторизации на сайте: JavaScript
10. Система управления версиями: Git
    • Папка build со всем её содержимым должна попадать в репозиторий на github.
11. Сборка проекта: Gulp
12. Тестировать страницу на Goggle PageSpeed Insights

Ссылки на материалы

• Макет Figma

• Шрифты

  • Whitney
  • Segoe UI

Краткая инструкция по развертыванию проекта

Подготовка системы автоматизации сборки

Установите

• 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