Демонстрация: vowonderful.github.io/softcorp-test/dist/ | softcorp.nextwell.top
[показать макет]
- Вёрстка должна быть адаптивной с минимальным разрешением для отображения 320px. Адаптив делается на Ваше усмотрение, однако при любом разрешении страница должна корректно отображаться в браузере.
- Вёрстка с соблюдением структуры и нейминга в соответствии с методологией БЭМ.
- Для стилей используется препроцессор SASS в диалекте SCSS.
- Готовая вёрстка должна корректно отображаться на последних версиях всех актуальных браузеров (Chrome, Firefox, Edge (chromium), Safari), а также их мобильных аналогах.
- Готовая страница, а также все ресурсы должны быть оптимизированы по "весу" и размеру.
- Текст, количество пунктов в оформлении заказа, количество полей форм могут меняться - вёрстка должна это предусматривать.
- В футере платежные системы - не ссылки, а контакты - ссылки.
- Форма должна быть подготовленной к работе (каждое поле должно быть input[name='....']).
- Шапка (header) должна прилипать к верху страницы про скролле.
- Не допускается использование html/css-фреймоворков или сеток по типу bootstrap и др.
- Приветствуется инициативность в создании динамики на странице (анимации, hover).
- Допускается использование сторонних плагинов для стилизации элементов, если это необходимо.
- Выполненное тестовое задание должно быть загружено на github со страницей на github pages.
[результат для десктопов]
[результат для мобильных устройств]
- именование классов реализовано по методологии БЭМ
- используется файловая БЭМ-структура для компонентного подхода к разработке
- используются препроцессоры Pug и SCSS
- используется Webpack для сборки JavaScript-модулей
- установите NodeJS
- установите глобально:
- Yarn:
npm i -g yarn - Gulp:
npm i -g gulp - Bem Tools:
npm i -g bem-tools-core
- Yarn:
- скачайте сборку с помощью Git:
git clone https://github.com/vowonderful/softcorp-test.git . - перейдите в скачанную папку со сборкой:
cd softcorp-test - введите
yarn set version berry - скачайте необходимые зависимости:
yarn - чтобы начать работу, введите команду:
yarn run dev(режим разработки) - чтобы собрать проект, введите команду
yarn run build(режим сборки)
Если Вы всё сделали правильно, должен открыться браузер с локальным сервером. Режим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.