Домашнее задание
+Создай репозиторий goit-markup-hw-02.
+Склонируй созданный репозиторий и скопируй в него файлы предыдущей работы.
+Выполни разметку и оформление макета страницы домашнего задания #2.
+Для оптимизации изображений используй сервис squoosh.
+Настрой GitHub Pages и добавь ссылку на живую страницу в шапку GitHub-репозитория.
Критерии приёма работы наставником
Проект
+«A1» В корне проекта есть папка images с изображениями.
+«A2» В корне проекта есть папка css с файлами стилей.
+«A3» Все стили написаны в одном файле styles.css, который находится в папке css.
+«A4» В названиях файлов нет заглавных букв, пробелов и транслита, только буквы и слова английского языка.
+«A5» Исходный код отформатирован при помощи Prettier.
+«A6» Все изображения и текстовый контент взяты из макета.
+«A7» Все растровые изображения оптимизированы используя squoosh.
+«A8» Код написан следуя руководству.
Разметка
+«B1» Разметка страницы Портфолио набрана в файле portfolio.html.
+«B2» Выполнена HTML-разметка всех элементов макета.
+«B3» Теги использованы согласно их семантического смысла.
+B4» HTML проходит проверку валидатором без ошибок.
+«B5» Имена классов описательные и понятные другому разработчику.
+«B6» Имена классов не содержат заглавных букв, пробелов, транслита и названий тегов, только буквы и слова английского языка. Если имя класса состоит из нескольких слов, они разделяются дефисом.
+«B7» Атрибут href навигационных ссылок Студия и Портфолио содержит относительный путь к HTML-файлам этих страниц. При нажатии по ссылке происходит переход на соответствующую страницу в текущей вкладке браузера.
+«B8» У тегов <img> указаны атрибуты размеров, как минимум width.
+«B9» Изображения экспортированы из макета в формате jpg.
+«B10» Группы однотипных элементов собраны в списки <ul>.
+«B11» Фильтр на странице Портфолио выполнен списком кнопок, каждой из которых задан атрибут type="button".
+«B12» Разметка хедера и футера одинаковая на всех страницах.
+«B13» Все необходимые по макету шрифты и их вариации (вес и начертание) подключены с сервиса Google Fonts одной ссылкой. Необходимый вес для Raleway – 700, а для Roboto – 400, 500, 700 и 900.
+«B14» Внутри разметки кнопок нет дополнительных элементов, например спанов или ссылок.
Оформление
+«C1» Нет глобальных стилей элементов кроме <body>.
+«C2» Для оформления используются селекторы класса.
+«C3» В стилях отсутствует !important.
+«C4» У интерактивных элементов (кнопок и ссылок), при наведении мышкой или фокусе с клавиатуры, есть активное состояние указанное в макете (изменение цвета).
+«С5» Текст контактов в хедере и футере меняет цвет при ховере и фокусе.
+«C6» Для хранения палитры цветов макета (текст, фон, выделение) используются CSS-переменные.
+«С7» Для элемента <body> задано свойство font-family с доминантным на макете шрифтом Roboto.
+«С8» Указаны альтернативные варианты шрифта и тип семейства (без засечек) в конце перечисления font-family у элемента <body>.
+«С9» Семейство шрифтов Roboto явно задано только для элемента <body>, остальные элементы наследуют его.
+«С10» Для элемента <body> задано свойство color с доминантным на макете цветом текста. Остальной текст наследует или переопределяет это значение.
+«С11» Размер шрифта (свойство font-size) всех текстовых элементов точно соответствует значениям из макета.
+«С12» Высота строки (свойство line-height) всех текстовых элементов точно соответствует значениям из макета и задана как множитель, а не в px.
+«С13» Цвет (свойство color) всех текстовых элементов точно соответствует значениям из макета.
+«С14» Вес шрифта (свойство font-weight) всех текстовых элементов точно соответствует значениям из макета.
+«С15» Вес шрифта (свойство font-weight) явно указан только если значение в макете отличается от стандартного для этого элемента в браузере.
+«С16» Кнопкам задано свойство cursor со значением pointer.
+ «С17» В стилях не повторяются значения свойств, которые заданы браузером по умолчнаию. Например, ссылкам не нужно указывать cursor: pointer, а абзацам font-style: normal или font-weight: 400.