- Название сайта: Кэт энерджи.
- Домен: нет.
- 1.1. Сетка: определена в макете.
- 1.2. Адаптивность сетки: мобильная, планшетная и десктопная версии («фикс» или «резина»).
- 1.3. Адаптивность графики: ретинизация, векторные изображения.
- 1.4. Используемая методология: БЭМ.
- 1.5. Используемый препроцессор: Less или Sass.
- 1.6. Используемый инструмент автоматизации: Gulp.
- 1.7. Используемые фреймворки: нет.
- 1.8. Кроссбраузерность: Chrome, Firefox, Opera, Safari, Edge и IE11.
- 1.9. Типографика: частично определена в макете (прочее — на усмотрение разработчика).
- 1.10. Используемый шрифт: Oswald.
- 2.1. Между версиями (мобильная, планшетная, десктопная) сетка может быть как резиновой, так и фиксированной.
- 2.2. При фиксированной сетке контентная область центруется и не может быть уже макетной ширины.
- 2.3. Логотип на внутренних страницах — это ссылка на главную страницу.
- 2.4. Главное меню в мобильной версии появляется над шапкой сайта (в макете в панели слоёв Photoshop меню выделено красным цветом).
- 2.5. Мобильное меню может быть реализовано двумя способами:
- реализация без JS;
- реализация с использованием JS.
- 2.6. При реализации без использования JS главное меню в мобильной версии должно быть всегда открыто, а иконка с крестиком — скрыта.
- 2.7. При реализации с использованием JS блок с главным меню в мобильной версии должен открываться при нажатии на иконку «гамбургера». Когда меню открыто, иконка «гамбургера» заменяется на крестик. При нажатии на иконку с крестиком меню закрывается.
- 2.8. Все состояния элементов при наведении и нажатии указаны в макетеcat-energy-styleguide.psd. Состояние ошибки должно быть реализовано только для обязательных полей формы (в макете они помечены звёздочкой).
- 2.9. Логотип Академии и ссылкаHTML Academy в футере ведут на лендинг интенсива «Профессиональный HTML и CSS, уровень 2».
- 3.1. Логотип состоит из упрощённой иконки и названия магазина «Кэт энерджи».
- 3.2. Кнопка «Подобрать программу» должна вести на страницу формы для подбора программы.
- 3.3. В блоках «Похудение» и «Набор массы» ссылкой должна быть строка, начинающаяся со слова «Каталог». При нажатии должен осуществляться переход на соответствующие разделы каталога. Страницы разделов реализовывать не нужно.
- 3.4. В блоке «Живой пример» слайдер реализовывать не обязательно. Достаточно вёрстки с одной из фотографий кота. По желанию можно сделать «Было» и «Стало» кнопками переключения фотографий кота.
- 3.5. Блок карты: необходимая реализация — интерактивная карта (карты Google или Яндекса), ширина подстраивается под ширину вьюпорта (но не уже контентной ширины макета), на карте размещён маркер (может быть как кастомным, так и дефолтным), центр карты соответствует центру блока в макете.
- 3.6. Блоки меняют размеры и расположение согласно макету.
- 3.7. В состав иконки логотипа добавляются новые элементы.
- 3.8. Главное меню всегда открыто вне зависимости от его состояния на мобильной версии.
- 3.9. Блоки меняют размеры и расположение согласно макету.
- 3.10. В составе логотипа добавляются новые элементы.
- 3.11. Фон первого блока под шапкой тянется на всю ширину экрана и состоит из двух равных частей: левая — с белым фоном, правая — с зелёным фоном и изображением кота, которое упирается в правую границу экрана.
- 4.1. Должны быть реализованы кастомные элементы форм.
- 4.2. У полей ввода телефона и почты должны быть указаны соответствующие типы для удобного заполнения с телефона.
- 4.3. Блоки меняют размеры и расположение согласно макету.
- 4.4. Блоки меняют размеры и расположение согласно макету.
- 5.1. Изображение и название товара – ссылки на страницу с описанием товара. Страницу с описанием товара реализовывать не нужно.
- 5.2. Кнопка «Заказать» вызывает появление модального окна для оформления заказа. Модальное окно оформления заказа реализовывать не нужно. При отключенном JS должен осуществляться переход на страницу оформления заказа (страницу оформления заказа реализовывать не нужно).
- 5.3. Кнопка «Показать все» показывает новые товары, загружаемые по ajax. Загрузку по ajax реализовывать не нужно. При отключенном JS должен осуществляться переход на страницу новых товаров (страницу новых товаров реализовывать не нужно).
- 5.4. Блоки меняют размеры и расположение согласно макету.
- 5.5. Блоки меняют размеры и расположение согласно макету.
- Б1. Выполнена HTML-разметка всех страниц проекта и всех элементов на этих страницах.
- Б2. Грубые ошибки в разметке отсутствуют.
- Б3. Документ проходит проверку на валидность https://validator.w3.org/nu/.
- Б4. В разметке отсутствует дублирование кода для одного и того же элемента, с помощью которых элемент отображается в разных местах страницы на разных версиях: мобильной, десктопной, планшетной. Этот критерий не касается элементов, которые скрываются или показываются в разных версиях.
- Б5. Отсутствуют типовые ошибки в разметке по методологии.
- Б32. Названия полей форм привязаны к своим полям с помощью .
- Б6. Раскладка блоков на странице сделана с помощью флексбоксов.
- Б7. В CSS отсутствует !important.
- Б8. Подключены правильные шрифты, их размеры, цвет и толщина равны соответствующим параметрам в макетах и техническом задании.
- Б9. Нестандартные шрифты подключены локально. Формат шрифтов должен быть woff и woff2.
- Б10. Указаны альтернативные варианты шрифта и тип семейства в конце перечисления font-family.
- Б11. При наполнении контентом (как в макете) элементы каждой версии страницы (мобильной, планшетной и десктопной) соответствуют макету.
- Б12. Использован CSS-препроцессор.
- Б13. Код стилей должен быть разбит на несколько частей.
- Б14. Выполнена вёрстка трёх состояний каждой страницы: мобильной, планшетной и десктопной.
- Б15. В разметке есть правильный вьюпорт тег.
- Б16. Для микросеток использованы флексбоксы.
- Б17. Выполнена ретинизация растровой графики.
- Б19. Логотип должен адаптироваться.
- Б20. Выполнено кадрирование контентных изображений.
- Б18. Использована векторная графика.
- Б21. «Нежная» ретинизация.
- Б22. Процесс сборки личного проекта настроен с помощью Grunt или Gulp.
- Б23. Все зависимости проекта должны быть указаны в файле package.json. Команда npm i должна установить всё необходимое для того, чтобы сборка проекта работала.
- Б24. Сборка проекта должна запускаться командой npm run build.
- Б25. В результате сборки должна получаться папка build со всеми необходимыми файлами.
- Б26. Папка build со всем её содержимым не должна попадать в Гитхаб.
- Б27. Вёрстка идентично отображается в последних версиях браузеров Chrome, Opera, Firefox, Safari, Edge, а также в Internet Explorer 11.
- Б28. Единообразное написание и форматирование кода в HTML, файлах CSS-препроцессора и JavaScript (включая файлы автоматизации).
- Б29. Отсутствует транслит в названиях классов, атрибутах, переменных CSS-препроцессора, названиях примесей и так далее.
- Б30. Мобильное меню должно быть работоспособным на мобильной версии при отключённом JavaScript.
- Б31. Проект соответствует техническому заданию
- Д1. У всех векторных изображений размер прописан в теге
, у встроенных SVG-изображений размер прописан в теге .
- Д2. Использовано минимально возможное количество HTML-элементов (нет лишних элементов).
- Д4. Для стилизации не использованы #id.
- Д6. Для блока, у которого есть фоновое изображение, прописан фоновый цвет, который соответствует преобладающему цвету изображения (пока изображение не загружено, страница выглядит похоже на макет).
- Д7. Все состояния элементов (смотрите styleguide.psd) прописаны в стилевом файле.
- Д16. Нет глобальных стилей тегов.
- Д8. Запрещено использовать цветовые функции для изменения цветовых значений в коде.
- Д9. Примеси не используются для генерации правил с вендорными префиксами.
- Д10. Нет вложенности больше двух уровней.
- Д11. Верное использование & в стилевых файлах.
- Д12. Не используются расширения (extend).
- Д13. Вёрстка проходит тест на переполнение контентом.
- Д14. Критическая функциональность сайта работоспособна без JavaScript (использовано прогрессивное улучшение).
- Д17. У интерактивных элементов при нажатии или фокусе с клавиатуры есть активное состояние.
- Д18. Все интерактивные элементы имеют текстовое описание.
- Д19. Код соответствует правилам в EditorConfig
- Д20. Код соответствует правилам в Stylelint.
- Д21. Использованы изображения в формате webp.
- Д22. Использован векторный спрайт.
- Д15. При взаимодействии с элементами (наведение, нажатие) ни сам элемент, ни окружающие его блоки не меняют своего положения (если иное не прописано в техническом задании или slyleguide.psd).