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

Explore

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

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

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.