Share
Explore

Front-end // lvl. Junior

Необходимо сверстать лендинг для сервиса Everypay.
на макеты
Верстка должна быть выполнена для следующих разрешений: 1440, 768, 320.
Сборка может использоваться любая, но выбор должен быть обоснован (это касается и всех технологий, использованных при выполнении задания).
Все картинки должны быть оптимизированы.
Первые 4 блока с иллюстрациями должны складываться в один слайдер
.
Анимации — по желанию.

Обязательные требования к проекту:

Общие:

В папке проекта обязательно должны быть README.md с инструкциями по запуску и сборке проекта
Проект должен быть выполнен с использованием git
Все зависимости должны быть указаны в файле package.json
Сборка должна запускаться командой npm run build
В результате сборке должна получаться папка build со всеми необходимыми файлами
Верстка должна смотреться хорошо на всех разрешениях
Верстка должна проходить тестирование на переполнение контентом и на переполнение элементами
Верстка должна смотреться одинаково в Chrome, Firefox, Safari

Бонусом будет, если будет выполнено что-то из этого:

Верстка:

Шаблонизатор Pug
Разметка выполнена с помощью семантических тегов, теги должны использоваться правильно
Разметка проходит проверку на валидность на
Для именования классов используется БЭМ
Не должно быть ошибок на
(ошибки из-за классов для js допустимы)

Формы:

Каждый input либо должен быть вложен в label, либо связан с ним
Форма должна валидироваться
После отправки формы должно показываться сообщение об успешной отправке
Невалидная форма не должна отправляться
У пользователя не должно быть возможности растянуть textarea

Стилизация:

Используется препроцессор SCSS
Адаптив выполняется desktop-first
В стилизации не используется !important
Цвета, градиенты и брейкпоинты должны быть вынесены в переменные
Шрифты подключаются в форматах woff и woff2
Код стилей должен быть разбит на несколько блоков
На страницу подключается один стилевой файл style.css
Стилевой файл должен быть прогнан через автопрефиксер, префиксов не должно быть в стилях (исключением являются штуки, которые не работают без префикса, например -webkit-text-stroke)
Все интерактивные элементы должны иметь стили на hover
Все transition при наведении на интерактивные элементы должны быть одинаковыми (изинг, продолжительность)

Скрипты

Библиотеки устанавливаются через npm
Скрипты должны быть ванильными (без jQuery)
Скрипты написаны с использованием синтаксиса es6
Скрипты должны быть написаны в модульной структуре
Скрипты подключаются одним файлом index.js
Файл скриптов должен быть минифицирован
В консоли разработчиков не должно быть ошибок
При удалении элементов, которые обрабатываются скриптами, со страницы, скрипты не должны ломаться
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.