Developing

[Phizick]

В проекте реализовано:

резиновая адаптивность страниц
пользовательские сценарии на js
блок с выпадающим меню переписан на js
сами страницы сверстаны с использованием flex
реализованы переходы на страницы предыдущей группы

Задачей на проект было использование работ предыдущей группы ссылка на проект предыдущей команды

Большинство блоков переиспользованы, однако было решено переписать блок sidebar( выпадающее меню) полностью, в более точном соответствии с макетом (плавность переходов, отображение etc.)
Так же изменена разметка самих страниц .page (в предыдущем проекте использовался grid-layout) Было принято решение использовать flex, так как позиционирование на гридах нашли не слишком надежным и удобным в дальнейшем

Для реализации совместимости с проектом предыдущей группы было принято решение не мерджить все в один репозиторий (так как в блоке page существовал конфликт между grid и flex), а поместить его в отдельную папку в корне проекта (в дальнейшем возможно быстрое слияние без конфликтов, если потребуется)

ссылка на проект в pages

[Phizick]

Исправлены все недочеты. При слиянии проектов было принято решение заменить блок сайдбар прошлого проекта на наш, с сохранением функциональности. Оставлены так же файлы линтинга. Для совместимости верстки добавлено 4 специальных класса, с возможностью избавиться от них в будущем.
далее перепишем весь тест на js с использованием стореджа

[ghbd]

Критерии

1. Соответствие макету:
   • 1.1 Все элементы из макета сверстаны
   • 1.2 Шрифты, размер, цвет и начертания текста соответствуют макету
   • 1.3 Ширина элементов и отступы отличаются от макета не более, чем на 30px на десктопной версии и на 10px на остальных размерах экрана, для которых подготовлен макет. Отличия в размерах не должны визуально противоречить макету и выбиваться из заложенной в макет сетки, в этом случае требуется более строгое соответствие размерам макета
   • 1.4 Все блоки соответствуют макету в последних версиях Firefox, Google Chrome или Yandex Browser
2. Адаптив:
   • 2.1 На всех размерах экрана 320px и более отсутствует горизонтальный скролл
   • 2.2 Установленная максимальная ширина контента соответствует макету
   • 2.3 Вёрстка не ломается между брейкпоинтами
   • 2.4 Брейкпоинты сгруппированы. Если два брейкпоинта имеют небольшую пиксельную разницу в медиа-правиле, они объединены в один
   • 2.5 Текст не выпадает из блоков на всех размерах экрана 320px и более
   • 2.6 Изображения не искажаются и выглядят как в макете на всех размерах экрана
   • 2.7 Одинаковые свойства в разных медиа-правилах не дублируются
3. Верстка:
   • 3.1 Нет ошибок валидации https://validator.w3.org/nu/ (Erorrs)
   • 3.2 Используются <main>, <section>, <header>, <footer>, <ul>, <nav>, <h1-h6> и <p> там, где это необходимо
   • 3.3 Не используются элементы <b>, <br>, <i>
   • 3.4 Отсутствуют лишние div обёртки
   • 3.5 Контентные картинки вставлены через <img> и в них присутствует alt с описанием, соответствующим языку страницы
   • 3.6 На странице есть заголовок первого уровня
   • 3.7 Заголовки соответствуют иерархии страницы
   • 3.8 Корректно задан viewport, прописаны title и lang.
4. CSS:
   • 4.1 Не используется !important
   • 4.2 Абсолютное позиционирование не используется без непосредственной необходимости
   • 4.3 Использование height и max-height не приводит к выпадению текста или блоков при переполнении
   • 4.4 Любой интерактивный элемент имеет состояние наведения, состояние наведения берется из макета или используется прозрачность
   • 4.5 Для каждого шрифта указаны альтернативные варианты из системных шрифтов и тип шрифта Комментарии: .sidebar-account__title
5. Применение БЭМ:
   • 5.1 Нет нарушения методологии БЭМ: нет элементов без родительского блока, нет элементов элементов, модификаторы не используются без указания того, что они модифицируют Комментарии: page_compatibility, personal-info__input_date, personal-info__input_file, personal-info__item_tel, personal-info__item_photo, sidebar-content__checkbox-options_group некорректное использование булевого модификатора
   • 5.2 Не используются селекторы по тегу
   • 5.3 Для одинаковых блоков в макете переиспользуется стили одного БЭМ-блока
   • 5.4 Числа в названиях классов не используются, за исключением классов для элементов, указанных в руководстве по стилю (Style Guide)
   • 5.5 Модификатор не отражает позицию элемента в разметке (paragraph_first)
   • 5.6 Модификаторы не содержат дубли стилей модифицируемого элемента или блока, только изменяющиеся свойства
   • 5.7 Файловая структура построена по БЭМ nested Комментарии: http://joxi.ru/GrqJj4Xtz04JKm элементы должны стилизоваться в своих css файлах

• 6. Функциональность на JS работает корректно (слайдеры, бургерное меню или другие требования согласно заданию на проект)

7. Структура проекта и оформление кода
   • 7.1 Соблюдена единообразная файловая структура проекта, например, изображения в папке images, шрифты в папке fonts, стили в папке blocks, скрипты в папке scripts, а не разбросаны в разных папках и не хранятся в корне проекта
   • 7.2 Код в проекте отформатирован единообразно
   • 7.3 Нет нарушений иерархии отступов в разметке, стилях и файлах скриптов

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