- Создай репозиторий
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.