- Студент: Arthur Litovko.
- Наставник: Дарья Воздраганова.
-
- Выполнена HTML-разметка всех страниц и всех элементов на страницах.
-
- К страницам подключён один стилевой файл (с учётом
normalize.cssк каждой странице могут быть подключены два стилевых файла).
- К страницам подключён один стилевой файл (с учётом
-
- Стилевой файл подключён внутри
<head>.
- Стилевой файл подключён внутри
-
- Грубые ошибки в разметке отсутствуют.
-
- Документ проходит проверку на валидность.
-
- Вся собственная стилизация выполнена в одном стилевом файле.
-
- Раскладка блоков на странице сделана с помощью флексбоксов.
-
- В CSS отсутствует
!important.
- В CSS отсутствует
-
- Подключены правильные шрифты, их размеры, высота строк, цвет и толщина равны соответствующим параметрам в макетах и техническом задании.
-
- Указаны альтернативные варианты шрифта и тип семейства в конце перечисления
font-family.
- Указаны альтернативные варианты шрифта и тип семейства в конце перечисления
-
- При наполнении контентом (как в макете) элементы каждой страницы соответствуют макету.
-
- Вёрстка идентично отображается в последних версиях браузеров Chrome, Firefox, Safari, Edge, Internet Explorer.
-
- Сайт нормально смотрится на минимальной для макета ширине.
-
- В корне проекта имеются папки
css,img,jsили аналогичные. Главная страница имеет названиеindex.html. В названиях и расширениях файлов нет заглавных букв и пробелов, использованы только латинские символы.
- В корне проекта имеются папки
-
- Единообразное написание и форматирование кода в HTML, CSS и JavaScript.
-
- Выбран подходящий формат изображений.
-
- Проект соответствует техническому заданию
-
- У всех изображений в теге
<img>прописан размер.
- У всех изображений в теге
-
- Использовано минимально возможное количество HTML-элементов (нет лишних элементов).
-
- Все скрипты подключены непосредственно перед
</body>.
- Все скрипты подключены непосредственно перед
-
- Названия полей форм привязаны к своим полям с помощью
<label>.
- Названия полей форм привязаны к своим полям с помощью
-
- Использован
normalize.css.
- Использован
-
- Для стилизации не использованы
#id.
- Для стилизации не использованы
-
- Нет вложенности селекторов больше двух.
-
- При использовании блочно-строчных элементов явно указывайте вертикальное выравнивание
-
- Для CSS-свойств с префиксом указан вариант без префикса.
-
- Для блока, у которого есть фоновое изображение, прописан фоновый цвет, который соответствует преобладающему цвету изображения (пока изображение не загружено, страница выглядит похоже на макет).
-
- Все состояния элементов (смотрите
styleguide.psd) прописаны в стилевом файле.
- Все состояния элементов (смотрите
-
- Стилизация нестандартных элементов форм.
-
- Файл стилей представлен в двух вариантах: с форматированием и минимизированный.
-
- Нет глобальных стилей тегов.
-
- Собственные скрипты собраны в отдельном JavaScript-файле, который подключён в HTML перед закрывающим тегом body.
-
- JavaScript-файл представлен в двух вариантах: с форматированием и минимизированный, к странице подключён минимизированный.
-
- С помощью JavaScript реализовано открытие/закрытие окна с формой (без вспомогательных библиотек).
-
- С помощью JavaScript добавлена анимация формы (без вспомогательных библиотек).
-
- Добавлена интерактивная карта (допускается подключение с помощью
iframe).
- Добавлена интерактивная карта (допускается подключение с помощью
- Вёрстка проходит тест на переполнение контентом.
-
- У интерактивных элементов при нажатии или фокусе с клавиатуры есть активное состояние.
-
- Все интерактивные элементы имеют текстовое описание.
-
- У контентных изображений в
<img>заполненalt.
- У контентных изображений в
-
- Телефоны размечены ссылками с протоколом
tel.
- Телефоны размечены ссылками с протоколом
-
- Критическая функциональность сайта работоспособна без JavaScript (использовано прогрессивное улучшение).
-
- Отсутствует транслит в названиях классов, атрибутах, названиях файлов и так далее.
-
- При взаимодействии с элементами (наведение, нажатие) ни сам элемент, ни окружающие его блоки не меняют своего положения (если иное не прописано в техническом задании или
styleguide.psd).
- При взаимодействии с элементами (наведение, нажатие) ни сам элемент, ни окружающие его блоки не меняют своего положения (если иное не прописано в техническом задании или
-
- Страницы должны ссылаться друг на друга из главного меню.
Чтобы обучение было более продотворным я попробовал реализовать несколько практик, которые совсем не обязательны для сдачи, но будут полезны в будущем
- Иконки собраны в SVG-спрайт. В начале страницы с
display: none. Хорошей практикой было бы вынести их в отдельный файл, но тогда бы не было поддержки IE, а это обязательный критерий - Реализован слайдер на JS. Переключатели создаются динамически в зависмости от количества слайдов. Хотелось бы использовать
<template>, но IE. - Price range. Минимальный функционал (ползунки двигаются и результат выводится в поля)
- Небольшие эксперементы с Google Maps API.
- Некоторые изображения которые в макете были представлены в растре, я отрисовал заново в векторе.
- Появление модального окна дополнительно задано через
:target. Fallback на случай отключения JS. - Проект свёрстан на Pug/Sass. Для простоты сборки использвалась програма Prepros.
Репозиторий создан для обучения на профессиональном онлайн‑курсе «HTML и CSS, уровень 1» от HTML Academy.