- Створи репозиторій
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
– 800, а для Roboto – 400, 500, 700 і 900.
«B14» Всередині розмітки кнопок відсутні додаткові елементи, наприклад
спани або посилання.
Оформлення
«C1» Відсутні глобальні стилі елементів, крім <body>.
«C2» Для оформлення використовуються селектори класу.
«C3» В стилях відсутній !important.
«C4» Інтерактивні елементи (кнопки і посилання), при наведенні мишкою або
фокусі з клавіатури, мають активний стан, вказаний в
Style guide
(зміна кольору).
«С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 та background-color) всіх елементів
точно відповідає значенням з макета.
«С14» Вага шрифту (властивість font-weight) всіх текстових елементів
точно відповідає значенням з макета.
«С15» Вага шрифту (властивість font-weight) явно вказана тільки, якщо
значення в макеті відрізняється від стандартного для цього елемента в браузері.
«С16» Кнопкам задана властивість cursor зі значенням pointer.
«С17» У стилях не повторюються значення властивостей, які задані браузером
за замовчуванням. Наприклад, посиланням не потрібно вказувати cursor: pointer,
а абзацам font-style: normal або font-weight: 400.