Gallery
DEV // Тестовые задания
Share
Explore
Gallery
DEV // Тестовые задания

icon picker
Front-end // lvl. Junior/Junior+

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

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

Общие:

В папке проекта обязательно должны быть README.md с инструкциями по запуску и сборке проекта
Проект должен быть выполнен с использованием git
Все зависимости должны быть указаны в файле package.json
Сборка должна запускаться командой npm run build
В результате сборке должна получаться папка build со всеми необходимыми файлами
Верстка должна смотреться хорошо на всех разрешениях
Верстка должна проходить тестирование на переполнение контентом и на переполнение элементами
Верстка должна смотреться одинаково в Chrome, Firefox, Safari
Для именования классов используется БЭМ
Не должно быть ошибок в БЭМ структуре. Проверить можно по ссылке
https://yoksel.github.io/html-tree/
⁠
(ошибки из-за классов для js допустимы)
Верстка проходит валидацию через
https://validator.w3.org/nu/
⁠
⁠

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

Верстка:

Шаблонизатор Pug
Разметка выполнена с помощью семантических тегов, теги должны использоваться правильно.
Сделана доступность (aria-roles, title и т.п.)

Формы:

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

Стилизация:

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

Скрипты

Библиотеки устанавливаются через npm
Скрипты должны быть ванильными (без jQuery)
Скрипты написаны с использованием синтаксиса es6
Скрипты должны быть написаны в модульной структуре
Скрипты подключаются одним файлом index.js
Если библиотеку нельзя поставить через npm, то она должна лежать в отдельной папке скриптов и входить в сборку.
Файл скриптов должен быть минифицирован
В консоли разработчиков не должно быть ошибок
При удалении элементов, которые обрабатываются скриптами, со страницы, скрипты не должны ломаться

Gallery
Share
 
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.