Чеклист для самопроверки. 2 Спринт.

Напоминаем, что есть критерии, которые нужно соблюсти, чтобы работу вообще приняли на проверку. В этот раз их немного больше.

• Ошибки в вёрстке:
  • один или несколько блоков неверно отображаются в Firefox, Google Chrome или Yandex Browser;
  • пять или больше элементов отсутствуют вовсе;
  • не хватает секции;
  • порядок блоков не соответствует брифу;
  • не применяется технология выравнивания или построения сетки.
  • на десктопных разрешениях (1000px +) страница прокручивается по горизонтали;
  • некорректно указан шрифт;
  • отсутствует анимация одной из фигур.
• Код плохо оформлен:
  • не соблюдена вложенность HTML в более чем пяти местах;
  • не соблюдён стиль написания CSS-правил более чем в пяти местах;
  • все стили находятся в одном CSS-файле, а не разбиты по блокам в самостоятельных папках.

В этом блоке собраны вопросы, на которые вам предстоит ответить, чтобы выявить и самостоятельно исправить частые ошибки. В следующих спринтах мы предложим вам новые критерии для самопроверки.

С этого спринта вам предстоит самостоятельно формулировать вопросы. Мы лишь описали требования к итоговой работе. Всё как в настоящем техническом задании:

Общее

• В проекте есть index.html, index.css, README.md, директория blocks со стилями и файлы с картинками в директории images
• В index.css импортирован normalize.css
• Внешнее соответствие вёрстки и макета в брифе.
• Нет опечаток в коде HTML и CSS, страница валидна

  Валидность — один из показателей качества вашей вёрстки. Показывает, насколько она соответствует стандартам W3C: соблюдена ли вложенность элементов, все ли элементы существуют, закрыты ли парные теги и другие критерии. Проверить код на наличие ошибок можно в валидаторе. Наличие предупреждений допустимо.

  . Рекомендуем использовать валидатор разметки от w3.org.
• Изменена последовательность секций в соответствии с брифом.
• Изображения не искажаются и выглядят как в брифе.
• Реализованы все анимации из брифа. Анимации выполнены через @keyframes в блоке rotation.
• Для вставки видео используется iframe.
• Файл README.md содержит:
  • заголовок-название;
  • описание проекта и его функциональности;
  • указание, что за технологии используются, если их много.
• В футер добавлены иконки, текст и ссылки по которым можно кликнуть.
• На странице нет скрытых элементов.

Семантика

• У изображений есть атрибут alt со значениями, которые написаны на том же языке, что и контент страницы.
• Для вёрстки заголовков применяются только несколько тегов от h1 до h6, текстовые блоки размечены тегами p, списки ul и li. Присутствуют используются по назначению элементы header, main, footer, section, nav.

Заголовки

• На странице есть заголовок первого уровня. Заголовки соответствуют иерархии страницы.

БЭМ

• Не используются селекторы по тегу.
• Нет вложенности более двух селекторов.
• Стили и картинки в самостоятельных папках разбиты по блокам. Создана файловая структура по БЭМ (Nested).
• Блоки, элементы и модификаторы названы в соответствии с брифом.
• Блоки повторно используются в тех местах, где этого требует бриф.

CSS

• Значения отступов у элементов соответствуют брифу.
• Стандартные значения отступов у элементов (заголовков, параграфов, списков) обнулены в соответствии с брифом.
• Картинки в проекте не перекрывают текст, то есть текст располагается над изображением по оси Z.
• Абсолютное позиционирование применяется только к тем элементам, которые явно указаны в брифе.
• У элементов с абсолютным позиционированием заданы координаты по двум осям.
• Ни одному текстовому блоку не задана фиксированная высота. Блок растягивается, если в него вставляют в 2—3 раза больше текста.
• Цвета ссылок и текста соответствуют брифу.
• Фоновые цвета секций соответствуют брифу.
• Размеры, начертания и цвет шрифтов как в макете.
• Для создания сеток используется flex или grid-layout.
• Ссылкам задано состояние при наведении указателя мыши :hover.