Этапы работы над задачей
Скачайте архив проекта, разархивируйте его и добавьте в свою рабочую область редактора кода.
Откройте макет в Figma, экспортируйте и подключите графику для кадрирования и ретинизации экранов (пример кадрирования, пример ретинизации).
Настройте плагин Live Sass Compiler так, чтобы он компилировал CSS-файл в папку /css/style.css.
Для того чтобы CSS-файл скомпилировался в папку /css, откройте файл settings.json (скриншот) и переопределите настройки плагина в строке savePath (скриншот) на "savePath": "~/../css/".
Адаптивно сверстайте основное содержимое страницы landing.html, используя подготовленные миксины, которые находятся в папке scss/global/_mixin.scss, основываясь на дизайне из предоставленного макета Figma (скриншот).
Доработайте утилитарный класс <div class="container"> и адаптивную вёрстку страницы под корректное отображение на любой ширине экрана с применением «резинового» подхода.
Сформируйте все состояния интерактивных элементов согласно UI-kit (скриншот).
Критерии оценки
Применена «резиновая» вёрстка для корректного отображения страницы на любой ширине от 360 до 4000 пикселей.
Вёрстка адаптирована под все разрешения, указанные в макете.
Растровые изображения подготовлены для экранов с плотностью пикселей 2х.
Изображения подключены с учётом их адаптации.
Стилизация выполнена с помощью препроцессора Sass.
Семейства шрифтов и цвета записаны в SCSS-переменных.
Сформированы все состояния элементов из UI-kit.
При недостаточной высоте основного содержимого подвал страницы прижат к низу экрана (скриншот).
Поля формы находятся внутри тега <form>.
У обязательных полей есть атрибут required.
Отсутствует избыточное увеличение веса селектора (пример ошибки).
Область взаимодействия с интерактивным элементом предсказуема и достаточна.
У интерактивных элементов при фокусе с клавиатуры есть визуальный отклик.
У спозиционированных графических элементов отключена кликабельность (pointer-events: none;).
Векторные изображения добавлены в спрайт.
У полей формы указаны атрибуты name и id, у радиокнопок указан value.
Вёрстка соответствует макету, учитывая проверку по Pixel Perfect (погрешность – 10 px).
Сетки разработаны с помощью технологии Flex или Grid.
У всех интерактивных элементов есть явная или скрытая текстовая подпись.
Добавлен скрытый заголовок при отсутствии подходящего заголовка из макета.
У кнопки верно заполнен обязательный атрибут type.
Основное содержимое страницы не должно находиться вне разделов. Весь контент внутри тега main располагается в тегах <section>.
При формировании разделов горизонтальная центровка относительно краёв страницы выполняется за счёт утилитарного класса <div class="container">.
Соблюдена логика файловой структуры проекта.
Код отформатирован.
Вёрстка создана с помощью БЭМ.
Разметка сформирована согласно семантике.
Вёрстка прошла проверку на валидность (HTML-валидатор, БЭМ-валидатор).
При переносе из макета текст прошёл обработку типографом.
Графика выбрана в подходящем формате: JPG, PNG или SVG.
Всем ссылкам задано значение # для атрибута href.
Вёрстка проверена на переполнение контентом (пример ошибки).