Level 2

[PrevedMed6]

Первая итерация

[coolswood]

Резюме по работе:

Верстка и JSX

Критерии, влияющие на работоспособность

• [ ] Все блоки и элементы из макета сверстаны. Размеры и расположение не отличаются от макета на более, чем на 30px на десктопной версии и на 10px на остальных размерах экрана, для которых подготовлен макет. Отличия в размерах не должны визуально противоречить макету и выбиваться из заложенной в макет сетки, в этом случае требуется более строгое соответствие размерам макета. Отступы между блоками не соответствуют макету

Бордер кнопки не соответствует макету

Карточки не должны быть разными (не должны деформироваться)

• [x] Проект адаптирован под различные разрешения экрана. Горизонтальный скролл не возникает на разрешениях от 320 пикселей и больше. Нельзя скрывать полосу прокрутки свойством overflow: hidden.

• [x] Корректно работает навигация между страницами и ссылки на внешние ресурсы: ни одна ссылка не ведёт в пустоту или на якорь, внешние ссылки открываются в новой вкладке. На все страницы проекта можно попасть, а скрытые блоки можно отобразить.

• [ ] Именование классов сделаны по БЭМ. Есть ошибки в нейминге, проверять здесь (https://nglazov.github.io/bem-validator-page/)

• [x] Отзывчивая вёрстка, которая корректно тянется на всех промежуточных разрешениях.

• [ ] В коде используется семантическая разметка: применяются семантические теги, выбор элементов при вёрстке корректен (параграф должен быть параграфом, список — списком); структура DOM-дерева состоит не только из контейнеров div. Необходимо проверить валидацию (https://validator.w3.org/)

• [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.

• [x] Элементы формы должны выделяться, когда на них установлен фокус. Состояние фокуса, а также outline стилизованы в соответствии с макетом или на своё усмотрение.

• [ ] У формы должны быть заданы плейсхолдеры, валидированы обязательные поля. У формы поиска фильмов нет свойства required

• [x] reset.css запрещен.

Рекомендации

• [x] Для каждого шрифта указаны альтернативные варианты из системных шрифтов.
• [x] Для изображений задан атрибут alt с подходящий значением.
• [x] Растровые и векторные изображения оптимизированы;

Количество баллов: 77

Доп. Комментарии:

Неправильно задан lang

[coolswood]

Резюме по работе:

Верстка и JSX

Критерии, влияющие на работоспособность

• [x] Все блоки и элементы из макета сверстаны. Размеры и расположение не отличаются от макета на более, чем на 30px на десктопной версии и на 10px на остальных размерах экрана, для которых подготовлен макет. Отличия в размерах не должны визуально противоречить макету и выбиваться из заложенной в макет сетки, в этом случае требуется более строгое соответствие размерам макета.
• [x] Проект адаптирован под различные разрешения экрана. Горизонтальный скролл не возникает на разрешениях от 320 пикселей и больше. Нельзя скрывать полосу прокрутки свойством overflow: hidden.
• [x] Корректно работает навигация между страницами и ссылки на внешние ресурсы: ни одна ссылка не ведёт в пустоту или на якорь, внешние ссылки открываются в новой вкладке. На все страницы проекта можно попасть, а скрытые блоки можно отобразить.
• [x] Именование классов сделаны по БЭМ.
• [x] Отзывчивая вёрстка, которая корректно тянется на всех промежуточных разрешениях.
• [x] В коде используется семантическая разметка: применяются семантические теги, выбор элементов при вёрстке корректен (параграф должен быть параграфом, список — списком); структура DOM-дерева состоит не только из контейнеров div.
• [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.
• [x] Элементы формы должны выделяться, когда на них установлен фокус. Состояние фокуса, а также outline стилизованы в соответствии с макетом или на своё усмотрение.
• [x] У формы должны быть заданы плейсхолдеры, валидированы обязательные поля.
• [x] reset.css запрещен.

Рекомендации

• [x] Для каждого шрифта указаны альтернативные варианты из системных шрифтов.
• [x] Для изображений задан атрибут alt с подходящий значением.
• [x] Растровые и векторные изображения оптимизированы;

Количество баллов: 100

Доп. Комментарии: