Cross-Check 'Library. Part 1' - 'kozinaksa'

[ghost]

1. A link to your deployed project

   • https://rolling-scopes-school.github.io/kozinaksa-JSFEPRESCHOOL2023Q2/library/

2. A link to the project repository on Github.

   • https://github.com/rolling-scopes-school/kozinaksa-JSFEPRESCHOOL2023Q2/tree/library

3. A link to the task

   • https://github.com/rolling-scopes-school/tasks/blob/master/tasks/library/library-part1.md

4. A Link to the checklist for evaluating the task (if it exists)

   • https://rolling-scopes-school.github.io/checklist/

5. A screenshot of cross-checking marks

6. A final score after self-assessment, with comments 99 / 100 - Минус балл за интерактивность. Все четыре radio кнопки меняют положение при выборе одной из них.

7. A cross-check score of your Score 72 / 100

[helenakrasnova]

1) Назвать ишью по шаблону: Cross-Check 'название таска' - 'Ваше имя на Github'.
2) Приложить скрин с детальным фидбеком проверяющего

[ghost]

Подробный комментарий от проверяющего

[haslie22]

Вёрстка валидная 10/10

Вёрстка семантическая 16/16

В коде страницы присутствуют следующие элементы (указано минимальное количество, может быть больше):

• [x] <header>, <main>, <footer>: 2/2
• [x] шесть элементов <section> (по количеству секций): 2/2
• [x] только один заголовок <h1>: 2/2
• [x] пять заголовков <h2>: 2/2
• [x] один элемент <nav> (панель навигации в хедере): 2/2
• [x] два списка ul > li > a (панель навигации, ссылки на соцсети в футере): 2/2
• [x] семь кнопок <button>: 2/2
• [x] два инпута <input>: 2/2

Вёрстка соответствует макету 54/54

• [x] блок <header>: 8/8
  • [x] расстояние между элементами меню одинаковое, 30px
  • [x] Элементы меню работают как якоря. При нажатии на один из них нас перебросит наверх соответствующего раздела
  • [x] Сами элементы меню при наведении (эффект hover) должны быть интерактивными. Курсор должен поменяться на cursor: pointer
  • [x] Расстояние от самого меню до иконки пользователя - 40px. Иконка является отдльным элементом, и не входит в <nav>
  • [x] Текст "Brooklyn Public Library" находится в <h1>
• [x] секция Welcome: 4/4
• [x] секция About: 6/6
  • [x] Везде, где в тексте встречаются цифры в виде телефонного номера, это должны быть ссылки с типом "tel" и номером.
  • [x] Там, где в тексте встречается текст с именем контактного лица, это должна быть ссылка с типом "mailto" и адресом почты
• [x] секция LibraryCard: 8/8
  • [x] "Find your Library card" - это должа быть форма с полями input
  • [x] Все 3 кнопки должны быть интерактивными, плавно менять свой цвет при наведении на них, как указано в макете styleguides
• [x] блок <footer>: 8/8
  • [x] Адрес библиотеки должен быть ссылкой
  • [x] Иконки соцсетей также должны быть ссылками
  • [x] Вместо Username должно быть ваше имя, как оно пишется на английском языке и ссылка на GitHub

Общие требования к верстке 0/20

• [x] для построения сетки используются флексы или гриды: 2/2
• [x] при уменьшении масштаба страницы браузера вся вёрстка (контент и фоны) размещается по центру, а не сдвигается в сторону: 2/2
• [x] иконки добавлены в формате .svg. SVG может быть добавлен любым способом: 2/2
• [x] изображения добавлены в формате .jpg (.jpeg) или .png: 2/2
• [x] есть favicon: 2/2
• [x] плавная прокрутка по якорям: 2/2
• [x] в футере название ссылки Username заменено и ведет на GitHub студента: 2/2
• [x] в футере ссылка The Rolling Scopes School ведет на страницу курса https://rs.school/js-stage0/: 2/2
• [x] интерактивность элементов согласно макету: 2/2
• [ ] плавное изменение внешнего вида элемента при наведении и клике не влияет на соседние элементы: 1/2

Чтобы соседний радиобаттон не смещался при выборе текущего, можно, учитывая особенности твоей верстки, попробовать добавить элементу <label> фиксированную ширину, равную ширине этого label в тот момент, когда он выбран (112px).

99/100 баллов

[helenakrasnova]

спасибо, @haslie22 ! выставлено