Требования к проекту №3

• Разметка:

  1. Грубые ошибки в разметке отсутствуют.
  2. Отсутствуют типовые ошибки в разметке по методологии.
  3. У всех векторных изображений размер прописан в теге <img>, у встроенных SVG-изображений размер прописан в теге <svg>.
  4. В разметке отсутствует дублирование кода для одного и того же элемента, с помощью которых элемент отображается в разных местах страницы на разных версиях: мобильной, десктопной, планшетной.
  5. Использовано минимально возможное количество HTML-элементов (нет лишних элементов).
  6. Названия полей форм привязаны к своим полям с помощью <label>.

• Стилизация:

  1. В CSS отсутствует !important.
  2. Указаны альтернативные варианты шрифта и тип семейства в конце перечисления font-family.
  3. Нестандартные шрифты подключены локально. Формат шрифтов должен быть woff и woff2.
  4. Для стилизации не использованы #id.
  5. Нет глобальных стилей тегов.
  6. Для блока, у которого есть фоновое изображение, прописан фоновый цвет, который соответствует преобладающему цвету изображения (пока изображение не загружено, страница выглядит похоже на макет).

• CSS-препроцессор:

  1. Код стилей должен быть разбит на несколько частей.
  2. & только для псевдоэлементов, псевдоклассов и модификаторов.

• Адаптивность:

  1. Выполнена вёрстка трёх состояний каждой страницы: мобильной, планшетной и десктопной.
  2. В разметке есть правильный вьюпорт тег.
  3. Для микросеток использованы флексбоксы.
  4. Выполнена ретинизация растровой графики.
  5. Выполнено кадрирование контентных изображений.

• Графика:

  1. Использована векторная графика.

• Оптимизация:

  1. «Нежная» ретинизация.
  2. Использованы изображения в формате WebP.
  3. Использован векторный спрайт.
  4. Произведена оптимизация загрузки шрифтов.

• Тестирование:

  1. Вёрстка проходит тест на переполнение контентом.

• Сборка проекта:

  1. Процесс сборки личного проекта настроен с помощью Gulp.
  2. В результате сборки должна получаться папка build со всеми необходимыми файлами.
  3. Папка build со всем её содержимым не должна попадать в Гитхаб.

• Разное:

  1. Вёрстка идентично отображается в последних версиях браузеров Chrome, Opera, Firefox, Safari, Edge, а также в Internet Explorer 11+.
  2. Единообразное написание и форматирование кода в HTML, файлах CSS-препроцессора и JavaScript (включая файлы автоматизации).
  3. Мобильное меню должно быть работоспособным при отключённом JavaScript.
  4. Отсутствует транслит в названиях классов, атрибутах, переменных CSS-препроцессора, названиях примесей и так далее.
  5. Проект соответствует техническому заданию.

• Доступность:

  1. У интерактивных элементов при нажатии или фокусе с клавиатуры есть активное состояние.
  2. Все интерактивные элементы имеют текстовое описание.

• Форматирование и внешний вид:

  1. Код соответствует правилам в EditorConfig.
  2. Код соответствует правилам в Stylelint.