[x] Все блоки и элементы из макета сверстаны. Размеры и расположение не отличаются от макета на более, чем на 30px на десктопной версии и на 10px на остальных размерах экрана, для которых подготовлен макет. Отличия в размерах не должны визуально противоречить макету и выбиваться из заложенной в макет сетки, в этом случае требуется более строгое соответствие размерам макета.
[x] Проект адаптирован под различные разрешения экрана. Горизонтальный скролл не возникает на разрешениях от 320 пикселей и больше. Нельзя скрывать полосу прокрутки свойством overflow: hidden.
[x] Корректно работает навигация между страницами и ссылки на внешние ресурсы: ни одна ссылка не ведёт в пустоту или на якорь, внешние ссылки открываются в новой вкладке. На все страницы проекта можно попасть, а скрытые блоки можно отобразить.
[ ] Именование классов сделаны по БЭМ.
Есть ошибки в нейминге, Вы можете проверить их здесь (https://nglazov.github.io/bem-validator-page/)
[x] Отзывчивая вёрстка, которая корректно тянется на всех промежуточных разрешениях.
[ ] В коде используется семантическая разметка: применяются семантические теги, выбор элементов при вёрстке корректен (параграф должен быть параграфом, список — списком); структура DOM-дерева состоит не только из контейнеров div.
Основная структура проекта должна состоять из трех развнозначных тегов: header, main, footer. Обратите внимание что теги и классы это разные сущности. Необходимо проверить все страницы
[x] Для позиционирования элементов выбран верный подход, описанный корректным синтаксисом.
[x] Каркас макета реализован на Flex layout или Grid layout;x
[x] Инфраструктурные файлы проекта созданы через CRA.
[x] Работа модальных окон настроена.
[x] Разметка портирована в JSX:ф
[x] разметка заключена в ( ), лишние пустые
для этого не используются;
[x] разметка вынесена в соответствующие ей компоненты.
[x] В проекте есть:
[x] директория images/ с картинками,
[x] директория components/ с JS и CSS-файлами компонентов,
[x] директория fonts/ со шрифтами.
Хорошие практики
[x] Кнопки, инпуты и ссылки реализованы во всех состояниях, указанных в макете.
[x] В макете есть одинаковые элементы. Для их оформления должен быть переиспользован один компонент.
[x] Шрифты подключены через @font-face.
[x] Иконки экспортированы в формате SVG.
[ ] Элементы формы должны выделяться, когда на них установлен фокус. Состояние фокуса, а также outline стилизованы в соответствии с макетом или на своё усмотрение.
Элементы форм не выделяются, когда на них установлен ФОКУС. Форма поиска фильмов
[x] У формы должны быть заданы плейсхолдеры, валидированы обязательные поля.
[x] reset.css запрещен.
Рекомендации
[x] Для каждого шрифта указаны альтернативные варианты из системных шрифтов.
[x] Для изображений задан атрибут alt с подходящий значением.
[x] Растровые и векторные изображения оптимизированы;
Резюме по работе:
Верстка и JSX
Критерии, влияющие на работоспособность
[x] Все блоки и элементы из макета сверстаны. Размеры и расположение не отличаются от макета на более, чем на 30px на десктопной версии и на 10px на остальных размерах экрана, для которых подготовлен макет. Отличия в размерах не должны визуально противоречить макету и выбиваться из заложенной в макет сетки, в этом случае требуется более строгое соответствие размерам макета.
[x] Проект адаптирован под различные разрешения экрана. Горизонтальный скролл не возникает на разрешениях от 320 пикселей и больше. Нельзя скрывать полосу прокрутки свойством overflow: hidden.
[x] Корректно работает навигация между страницами и ссылки на внешние ресурсы: ни одна ссылка не ведёт в пустоту или на якорь, внешние ссылки открываются в новой вкладке. На все страницы проекта можно попасть, а скрытые блоки можно отобразить.
[ ] Именование классов сделаны по БЭМ.
Есть ошибки в нейминге, Вы можете проверить их здесь (https://nglazov.github.io/bem-validator-page/)[x] Отзывчивая вёрстка, которая корректно тянется на всех промежуточных разрешениях.
[ ] В коде используется семантическая разметка: применяются семантические теги, выбор элементов при вёрстке корректен (параграф должен быть параграфом, список — списком); структура DOM-дерева состоит не только из контейнеров div.
Основная структура проекта должна состоять из трех развнозначных тегов: header, main, footer. Обратите внимание что теги и классы это разные сущности. Необходимо проверить все страницы[x] Для позиционирования элементов выбран верный подход, описанный корректным синтаксисом.
[x] Каркас макета реализован на Flex layout или Grid layout;x
[x] Инфраструктурные файлы проекта созданы через CRA.
[x] Работа модальных окон настроена.
[x] Разметка портирована в JSX:ф
[x] В проекте есть:
Хорошие практики
[x] Кнопки, инпуты и ссылки реализованы во всех состояниях, указанных в макете.
[x] В макете есть одинаковые элементы. Для их оформления должен быть переиспользован один компонент.
[x] Шрифты подключены через @font-face.
[x] Иконки экспортированы в формате SVG.
[ ] Элементы формы должны выделяться, когда на них установлен фокус. Состояние фокуса, а также outline стилизованы в соответствии с макетом или на своё усмотрение.
Элементы форм не выделяются, когда на них установлен ФОКУС. Форма поиска фильмов[x] У формы должны быть заданы плейсхолдеры, валидированы обязательные поля.
[x] reset.css запрещен.
Рекомендации
Количество баллов: 89
Доп. Комментарии: