Shelter

Описание проекта

Shelter - это проект, в котором вам предстоит сверстать сайт, состоящий из двух страниц, сделать его адаптивным и интерактивным.

Ключевые навыки:

• валидная семантическая адаптивная вёрстка
• легкоподдерживаемый читаемый код
• экспорт стилей и графики из Figma
• использование JavaScript для реализации указанного в задании функционала

Этапы работы над проектом:

Задание состоит из трёх частей:

• shelter. week-1: Фиксированная вёрстка
  • в этой части задания необходимо сверстать страницы main и pets по макету, которые корректно отображаются при ширине окна не менее 1280px.
  • проверяется валидность вёрстки, её совпадение с макетом
• shelter. week-2: Адаптивная вёрстка
  • в этой части задания необходимо добавить адаптивность свёрстанным на первом этапе страницам, до ширины 320px включительно, с удовлетворением условий:
    • на любой ширине вся страница с контентом вмещается по ширине в окно браузера, горизонтальная полоса прокрутки не появляется
    • при ширине 768px и 320px страницы соответствуют макету
  • проверяется валидность верстки, ее совпадение с макетом на соответствующей ширине страницы, адаптивность верстки и отсутствие горизонтальной полосы прокрутки
• shelter. week-3: Добавление функционала
  • в этой части задания используем JavaScript для добавления странице интерактивности:
    • бургер-меню на обеих страницах
    • попап для карточек животных на обеих страницах
    • бесконечный слайдер-карусель на странице main
    • пагинация на странице pets
  • проверяется реализованный функционал

Продолжительность выполнения каждой части задания - 1 неделя Форма проверки каждой части задания - кросс-чек

Макет в figma

Создание собственной копии макета

Выполнение задания начните с создания собственной копии макета. Для этого

• авторизуемся в figma
• открываем макет
• на панели вверху нажимаем на стрелку рядом с названием макета, выбираем пункт "Duplicate to your drafts"
• слева вверху открываем настройки, выбираем "Back to files"
• открываем копию макета рядом с которой есть надпись "In Drafts"

Рекомендации по качеству кода

Рекомендации предлагаются для ознакомления, их строгое соблюдение на этапе stage#1 не предполагается и не проверяется

• гайдлайн https://codeguide.academy/html-css.html#html
• руководство по качеству кода
  • общие принципы
  • HTML и CSS рекомендации - начальный уровень
  • HTML и CSS рекомендации - продвинутый уровень

Технические требования

1. вёрстка валидная, семантическая, соответствующая макету
2. приложение корректно отображается и работает в браузере Google Chrome последней версии
3. запрещается использование CSS-фреймворков (bootstrap)
4. запрещается использование JS-фреймворков (Angular, React, Vue и т.д.)
5. запрещается использование устаревших библиотек (JQuery и т.д.)
6. запрещается использование TypeScript. На stage#1 вы практикуетесь в использовании чистого JavaScript, изучение TS и его использование предстоит на stage#2 текущего курса.
7. допускается использование CSS-препроцессоров (Sass), normalize.css
8. не рекомендуется использовать сброс стилей при помощи reset.css
9. запрещено добавление вёрстки картинкой, когда делается скрин части макета и вставляется в вёрстку. Для вёрстки используйте теги и символы, картинками можно добавлять изображения и иконки, а не элементы вёрстки (кнопки, блоки, секции)

Требования к репозиторию

• задание выполняется в приватном репозитории школы. Как работать с приватным репозиторием школы
• если у вас не создаётся приватный репозиторий школы, задание можно выполнять в личном приватном репозитории
• от ветки main создайте ветку shelter в ней создайте папку shelter, в ней разместите файлы проекта
• для деплоя используйте gh-pages Как сделать деплой задания из приватного репозитория школы
• если не можете для деплоя использовать gh-pages, используйте https://app.netlify.com/drop. Название страницы дайте по схеме: имя гитхаб аккаунта - название таска
• так как задача делится на три части, shelter будет иметь три версии:
  1. ветка shelter будет содержать первую часть задания, приступая ко второй части создайте ветку shelter-part2 от ветки shelter что позволит продолжить с того же места, на котором вы остановились в первой части
  2. по завершении выполнения второй части задания создайте Pull Request из ветки shelter-part2 в ветку shelter, проверьте на конфликты и сделайте Merge
  3. для третьей части выполнить первые 2 пункта еще раз но с другим названием ветки (shelter-part3)
  4. обратите внимание: Pull Request с последующем мержем выполняется только из ветки текущий разработки в начальную ветку этого таска. Мерж в ветку main не производится!
• внутренняя структура проекта - на ваше усмотрение. Самый простой вариант - отдельная верстка страниц, каждая со своими стилями и js, например, как тут. При сабмите работы обратите внимание, чтобы по указанной в сабмите ссылке открывалась именно главная страница задеплоенной работы

Требования к коммитам

• История коммитов должна отображать процесс разработки приложения.
• Названия коммитов дайте согласно гайдлайну

Требования к Pull Request

• Название Pull Request дайте по названию задания
• Описание Pull Request дайте по схеме Мержить Pull Request из ветки разработки в ветку main не нужно.

Чтобы получить баллы за задание необходимо:

• Выполнить задание *
• Засабмитить задание т.е. отправить его на проверку **
• Проверить все присланные на проверку работы и засабмитить результаты проверки до дедлайна кросс-чека ***

* Весь код проекта вам необходимо написать самостоятельно, только так можно чему-то научиться. Копирование чужого кода (Ctrl + C, Ctrl + V) на курсе запрещено. ** Засабмитить задание можно только до дедлайна таска, после дедлайна сабмит недоступен *** Если хотя бы одна работа не будет проверена - оценку за работу вы не получите

Как сабмитить задание

После выдачи таска, но до наступления дедлайна зайдите в rs app https://app.rs.school/, выберите Cross-Check: Submit, в выпадающем списке выберите необходимый таск, в поле Solution URL добавьте ссылку на задеплоенную версию созданного вами сайта, нажмите кнопку Submit.

Рекомендации по сабмиту

• Засабмитить задание рекомендуется как можно раньше, как только в rs app появится такая возможность. После сабмита задание можно продолжать выполнять до самого дедлайна
• Так как проект выполняется в приватном репозитории, сабмитить ссылку на репозиторий или pull request нет смысла - проверяющий его не увидит. Приватный репозиторий школы видите только вы сами, админы курса, и увидят ваши менторы, когда они появятся
• Убедитесь, что задеплоенная вами ссылка открывается в режиме инкогнито браузера
• Сделайте скриншот засабмиченной ссылки и сохраняйте его у себя до старта кросс-чека. Если вам не придут работы на проверку, скриншот послужит доказательством, что вы вовремя засабмитили ссылку на работу. В таком случае вашу работу проверят в ходе апелляции

Проверка задания

• форма проверки каждой части задания - кросс-чек
• инструкция по проведению cross-check: https://docs.rs.school/#/cross-check-flow

Материалы

• Старт в Figma для верстальщика
• Инструкция по работе в Figma для верстальщика
• Верстка сайта с нуля из Figma
• Используемые шрифты: Arial, google fonts и Georgia, google fonts

---

shelter. week-1 - Фиксированная вёрстка

=======

Links:

• Требования к верстке

shelter. week-1 - Фиксированная вёрстка

deploy shelter

• Описание и требования задания

Вам необходимо сверстать страницы main и pets согласно макету - только main-1280 и our-pets-1280 Ширина контента 1280рх не должна изменяться при изменении размера окна браузера.

Порядок работы

1. Задание выполняется в приватном репозитории школы. Как работать с приватным репозиторием школы
2. От ветки main создайте ветку shelter в ней создайте папку shelter, в ней разместите файлы проекта
3. Выполните задание.
4. Проверьте соответствие вашей работы Требованиям к вёрстке
5. Cамостоятельно оцените свою работу согласно предложенным Критериям оценки, с учётом Особенностей проверки вёрстки на соответствие макету
6. Для удобства проверки самооценку своей работы выведите в консоль браузера. Для этого подключите к файлу *.html файл index.js, в нём напишите функцию console.log(), в скобках в кавычках напишите самооценку по пунктам. Для переноса строк используйте символ \n
7. Сделайте деплой вашей работы на gh-pages. Например, создайте и замержите Pull Request из ветки shelter в ветку gh-pages. Название Pull Request произвольное. Описывать данный Pull Request нет необходимости.
8. После завершения работы откройте Pull Request из ветки shelter в ветку main. Название Pull Request дайте по названию задания. Описание Pull Request дайте по схеме Мержить данный Pull Request не нужно.
9. Ссылку на деплой вашей работы засабмитьте в rs app раздел "Cross-Check Submit"
10. После дедлайна таска стартует кросс-чек. Продолжительность кросс-чека три дня. Для получения балла за таск необходимо проверить все присланные на проверку работы и засабмитить в rs app в разделе "Cross-Check Review" результат проверки.

Требования к верстке

Header1

Страница Main (60)

1. Проверка верстки +7

   • верстка страницы валидная: для проверки валидности вёрстки используйте сервис https://validator.w3.org/ . +4 Валидной вёрстке соответствует надпись "Document checking completed. No errors or warnings to show." В таком случае баллы за пункт требований выставляем полностью. Если есть предупреждения - warnings, но нет ошибок - errors, выставляем половину баллов за пункт требований
   • логотип в хедере состоит из текстовых элементов +1
   • страница содержит ровно один элемент <h1> +1
   • добавлен favicon +1

2. Вёрстка соответствует макету +35

   • блок <header> +5
   • блок Not only +5
   • блок About +5
   • блок Our Friends +5
   • блок Help +5
   • блок In addition +5
   • блок <footer> +5

3. Требования к css +6

   • для позиционирования элементов блока Help использована сеточная верстка (flexbox или grid) +2
   • при уменьшении масштаба страницы браузера или увеличении ширины страницы (>1280px) вёрстка размещается по центру, а не сдвигается в сторону и не растягивается по всей ширине +2
   • фоновый цвет тянется на всю ширину страницы +2

4. Интерактивность элементов +12

   • элемент About the Shelter в навигации подсвечен и неинтерактивен, остальные элементы навигации интерактивны +2
   • каждая карточка с питомцем в блоке Our Friends интерактивна при наведении на любую область этой карточки +2
   • плавная прокрутка по якорям +2
   • выполняются все ссылочные связи согласно Перечню ссылочных связей для страницы Main +2
   • выполнена интерактивность ссылок и кнопок. Интерактивность заключается не только в изменении внешнего вида курсора, например, при помощи свойства cursor: pointer, но и в использовании и других визуальных эффектов, например, изменение цвета фона или цвета шрифта, согласно стайлгайду в макете. Если в макете стили не указаны, реализуете их по своему усмотрению, руководствуясь общим стилем макета +2
   • обязательное требование к интерактивности: плавное изменение внешнего вида элемента при наведении и клике, не влияющее на соседние элементы +2

   Страница Pets (40)

5. Проверка верстки +7

   • верстка страницы валидная: для проверки валидности вёрстки используйте сервис https://validator.w3.org/ . +4 Валидной вёрстке соответствует надпись "Document checking completed. No errors or warnings to show." В таком случае баллы за пункт требований выставляем полностью. Если есть предупреждения - warnings, но нет ошибок - errors, выставляем половину баллов за пункт требований
   • логотип в хедере состоит из текстовых элементов +1
   • страница содержит ровно один элемент <h1> +1
   • добавлен favicon +1

6. Вёрстка соответствует макету +15

   • блок <header> +5
   • блок Our Friends +5
   • блок <footer> +5

7. Требования к css +4

   • при уменьшении масштаба страницы браузера или увеличении ширины страницы (>1280px) вёрстка размещается по центру, а не сдвигается в сторону и не растягивается по всей ширине +2
   • фоновый цвет тянется на всю ширину страницы +2

8. Интерактивность элементов +14

   • элемент Our pets в навигации подсвечен и неинтерактивен, остальные элементы навигации интерактивны +2
   • доступные кнопки пагинации (вправо) активны, недоступные (влево) - неактивны (disabled) +2
   • каждая карточка с питомцем в блоке Our Friends интерактивна при наведении на любую область этой карточки +2
   • плавная прокрутка по якорям +2
   • выполняются все ссылочные связи согласно Перечню ссылочных связей для страницы Pets +2
   • выполнена интерактивность ссылок и кнопок. Интерактивность заключается не только в изменении внешнего вида курсора, например, при помощи свойства cursor: pointer, но и в использовании и других визуальных эффектов, например, изменение цвета фона или цвета шрифта, согласно стайлгайду в макете. Если в макете стили не указаны, реализуете их по своему усмотрению, руководствуясь общим стилем макета +2
   • обязательное требование к интерактивности: плавное изменение внешнего вида элемента при наведении и клике, не влияющее на соседние элементы +2

Перечень ссылочных связей

На странице Main

1. На страницу Pets ведут:
   • элемент навигации Our Pets
   • кнопка Get to know the rest в блоке Our Friends
2. На блок Help текущей страницы (якорная ссылка) ведут:
   • элемент навигации Help the shelter
3. На блок Our Friends текущей страницы (якорная ссылка) ведут:
   • кнопка Make a Friend в блоке Not only
4. На футер текущей страницы (якорная ссылка) ведут:
   • элемент навигации Contacts
5. Пустая ссылка:
   • логотип
   • номер банковской карты в блоке In addition
6. Другие варианты поведения:
   • в футере при нажатии на email или его иконку должен открываться почтовый сервис
   • в футере при нажатии на телефон или его иконку должен открываться набор номера
   • в футере при нажатии на локацию должна открываться страница с google maps в отдельном окне или вкладке браузера с любой локацией на ваш выбор

На странице Pets

1. На страницу Main ведут:
   • элемент навигации About the shelter
   • логотип в хедере
2. На блок Help страницы Main (якорная ссылка) ведут:
   • элемент навигации Help the shelter
3. На футер текущей страницы (якорная ссылка) ведут:
   • элемент навигации Contacts
4. Другие варианты поведения:
   • в футере при нажатии на email или его иконку должен открываться почтовый сервис
   • в футере при нажатии на телефон или его иконку должен открываться набор номера
   • в футере при нажатии на локацию должна открываться страница с google maps в отдельном окне или вкладке браузера с любой локацией на ваш выбор

Критерии оценки

Максимальная оценка за задание 100 баллов

Баллы за пункты требований указаны в разделе Требования к вёрстке

Все спорные моменты трактуются в пользу проверяемого студента.

Для удобства проверки выведите в консоль браузера самооценку своего проекта по пунктам с указанием баллов за каждый выполненный вами пункт.

Штрафы

1. Верстка всего макета или отдельных блоков добавлена картинкой -100
2. Использованы запрещенные техническими требованиями фреймворки, библиотеки, надстройки -100

Особенности проверки вёрстки на соответствие макету

• допускается отклонение вёрстки от макета до 10px по горизонтали и вертикали, если соблюдается визуальное сходство вёрстки и макета
• разрешены и даже приветствуются правки размеров и расположения криво нарисованных блоков
• в качестве инструмента для проверки соответствия вёрстки макету используйте расширение PerfectPixel
• при проверке вёрстки при помощи расширения PerfectPixel в первую очередь убедитесь, что в расширении выставлен масштаб 1, в браузере и операционной системе - масштаб 100%
• если разрешение экрана больше 1280рх, для проверки вёрстки на соответствие макету достаточно центрировать макет или вручную выставить макет по верхнему левому углу направляющих
• если разрешение экрана 1280рх и меньше, для проверки используем device toolbar браузера Google Chrome в режиме responsive
• обрати внимание, что при проверке работы в окне равном 1280px верстка может сжиматься на ~17px. Это происходит из-за того, что часть пространства верстки съедает вертикальный скролл (17px - стандартная величина скролла для Google Chrome)
• каждый блок и секция рассматриваются по отдельности, т.е. недочеты предыдущего блока не переносятся на следующий, а при переходе проверки на следующий блок, мы его выравниваем с наложенным изображением
• относительно текста проверяем его выравнивание, отступы до границы блока. Размеры текста проверяются только по высоте. Отличие в ширине слов и отступах между буквами при сопоставлении макета и вёрстки не считается ошибкой, если используется правильный шрифт с правильно указанными свойствами

Как сабмитить задание

• Задание shelter. week-1 проверяется в ходе кросс-чека.
• После выдачи задания, но до наступления дедлайна зайдите в rs app https://app.rs.school/, выберите Cross-Check: Submit, в выпадающем списке выберите название задания, в поле Solution URL добавьте ссылку на задеплоенную страницу с вёрсткой, нажмите кнопку Submit.

Рекомендации по сабмиту

• Засабмитить задание рекомендуется как можно раньше, как только в rs app появится такая возможность. После сабмита задание можно продолжать выполнять до самого дедлайна
• Так как проект выполняется в приватном репозитории, сабмитить ссылку на репозиторий или pull request нет смысла - проверяющий его не увидит. Приватный репозиторий школы видите только вы сами, админы курса, и увидят ваши менторы, когда они появятся
• Убедитесь, что задеплоенная вами ссылка открывается в режиме инкогнито браузера

Проверка задания shelter. week-1

• инструкция по проведению cross-check: https://docs.rs.school/#/cross-check-flow

---

shelter. week-2 - Адаптивная вёрстка

• Описание и требования задания

В этой части задания адаптируем ранее сверстанные страницы для планшетов и мобильных устройств. На разрешениях 1280px, 768рх и 320px ставится задача совпадения вёрстки с соответствующим макетом (брейкпоинты (@media queries) при этом могут быть другими (отличаться от проверяемых разрешений) и в другом количестве). На остальных разрешениях до 320рх включительно обеспечивается отсутствие горизонтальной полосы прокрутки при выполнении адаптивности и резиновости верстки, сохранении всего контента страницы, отсутствие изменения пропорций изображений, отсутствие белых полей справа от блоков. Для обеспечения резиновости верстки пользуйтесь относительными единицами измерения.

Порядок работы

1. Задание выполняется в приватном репозитории школы.
2. От ветки shelter создайте ветку shelter-part2 в ней уже будет находиться папка shelter с файлами проекта, выполненными на предыдущем этапе.
3. Продолжите выполнение задания в созданной ветке.
4. Проверьте соответствие вашей работы Требованиям к вёрстке.
5. Cамостоятельно оцените свою работу согласно предложенным Критериям оценки, с учётом Особенностей проверки адаптивности в DevTools и Особенностей проверки вёрстки на соответствие макету.
6. Самооценку своей работы выведите в консоль браузера. Для этого подключите к файлу index.html файл index.js, в нём напишите функцию console.log(), в скобках в кавычках напишите самооценку по пунктам. Для переноса строк используйте символ \n.
7. Создайте и замержите Pull Request из ветки shelter-part2 в ветку shelter. Название Pull Request произвольное. Описывать данный Pull Request нет необходимости.
8. После окончания кросс-чека предыдущей части задания обновите деплой вашей работы. Например, создайте и замержите Pull Request из ветки shelter в ветку gh-pages. Название Pull Request произвольное. Описывать данный Pull Request нет необходимости.
9. После завершения работы отредактируйте Pull Request из ветки shelter в ветку main, дополнив его функционалом второй части задания. Мержить данный Pull Request не нужно.
10. Ссылку на деплой засабмитьте в rs app раздел "Cross-Check Submit".
11. После дедлайна таска стартует кросс-чек. Продолжительность кросс-чека три дня. Для получения балла за таск необходимо проверить все присланные на проверку работы и засабмитить в rs app результат проверки.

Требования к вёрстке

1. Вёрстка страницы Main соответствует макету при ширине экрана 1280px: +14
   • блок <header>: +2
   • блок Not only: +2
   • блок About: +2
   • блок Our Friends: +2
   • блок Help: +2
   • блок In addition: +2
   • блок <footer>: +2
2. Вёрстка страницы Main соответствует макету при ширине экрана 768px: +14
   • блок <header>: +2
   • блок Not only: +2
   • блок About: +2
   • блок Our Friends: +2
   • блок Help: +2
   • блок In addition: +2
   • блок <footer>: +2
3. Вёрстка страницы Main соответствует макету при ширине экрана 320px: +14
   • блок <header>: +2
   • блок Not only: +2
   • блок About: +2
   • блок Our Friends: +2
   • блок Help: +2
   • блок In addition: +2
   • блок <footer>: +2
4. Вёрстка страницы Pets соответствует макету при ширине экрана 1280px: +6
   • блок <header>: +2
   • блок Our Friends: +2
   • блок <footer>: +2
5. Вёрстка страницы Pets соответствует макету при ширине экрана 768px: +6
   • блок <header>: +2
   • блок Our Friends: +2
   • блок <footer>: +2
6. Вёрстка страницы Pets соответствует макету при ширине экрана 320px: +6
   • блок <header>: +2
   • блок Our Friends: +2
   • блок <footer>: +2
7. Ни на одном из разрешений до 320px включительно не появляется горизонтальная полоса прокрутки, справа от отдельных блоков не появляются белые поля. Весь контент страницы при этом сохраняется: не обрезается и не удаляется: +20
   • нет полосы прокрутки при ширине страницы Main от 1280рх до 768рх: +5
   • нет полосы прокрутки при ширине страницы Main от 768рх до 320рх: +5
   • нет полосы прокрутки при ширине страницы Pets от 1280рх до 768рх: +5
   • нет полосы прокрутки при ширине страницы Pets от 768рх до 320рх: +5
8. Верстка резиновая: при плавном изменении размера экрана от 1280px до 320px верстка подстраивается под этот размер, элементы верстки меняют свои размеры и расположение, не наезжают друг на друга, изображения могут менять размер, но сохраняют правильные пропорции (Примеры неправильной и правильной реализации): +8
   • на странице Main: +4
   • на странице Pets: +4
9. При ширине экрана меньше 768px на обеих страницах меню в хедере скрывается, появляется иконка бургер-меню: +4 Открытие меню при клике на иконку бургер-меню на текущем этапе не проверяется
10. Верстка обеих страниц валидная: для проверки валидности вёрстки используйте сервис https://validator.w3.org/ : +8

Критерии оценки

Максимальная оценка за задание 100 баллов.

Баллы за пункты требований указаны в разделе Требования к вёрстке.

Все спорные моменты трактуются в пользу проверяемого студента.

Для удобства проверки выведите в консоль браузера самооценку своего проекта по пунктам с указанием баллов за каждый выполненный вами пункт.

Штрафы

1. Верстка всего макета или отдельных блоков добавлена картинкой: -100
2. Использованы запрещенные техническими требованиями фреймворки, библиотеки, пакеты, надстройки: -100

Особенности проверки адаптивности в DevTools

1. Открываем инструменты разработчика:
   • для этого нажимаем клавишу F12 или кликаем правой кнопки мыши и выбираем в появившемся меню пункт Посмотреть код;
   • в правом верхнем углу панели инструментов разработчика кликаем на иконку Toggle device toolbar;
   • на верхней панели выбираем Responsive.
2. Убедитесь, что в режиме Responsive нет вертикальной полосы прокрутки (она отсутствует по умолчанию). Если полоса прокрутки есть, её нужно убрать. Для этого:
   • в верхней панели device toolbar переключите тип устройства с Desktop на Mobile;
   • если тип устройства не отображается, в верхней панели device toolbar нажмите на три точки справа и выберите Add device type;
3. Выставляем ширину экрана на требуемую по ТЗ, при которой будем проверять соответствие макету. Если видим, что страница проверяемого сайта не перестроилась, или справа осталась белая полоса, может понадобиться обновить страницу несколько раз.
4. Проверяем вёрстку на соответствие макету.
5. При необходимости проверить адаптивность на разных разрешениях, плавно изменяем ширину экрана в DevTools от максимума (1280рх) до минимума (320рх), убеждаемся в отсутствии горизонтальной полосы прокрутки на всех разрешениях. Если появилась полоса прокрутки или белое поле справа, попробуйте обновить страницу, возможно, вёрстка не перестроилась.
6. При масштабировании экрана (например, zoom+ 125%) реальная ширина может отличаться на 1-2 пикселя. Например, реальное значение может быть 767 или 769, хотя инструменты разработчика будут показывать 768. Поэтому надо сдвинуть до точки перехода, несмотря на отличие.

Особенности проверки вёрстки на соответствие макету

• допускается отклонение вёрстки от макета до 10px по горизонтали и вертикали, если соблюдается визуальное сходство вёрстки и макета
• разрешены и даже приветствуются правки размеров и расположения криво нарисованных блоков
• в качестве инструмента для проверки соответствия вёрстки макету используйте расширение PerfectPixel
• при проверке вёрстки при помощи расширения PerfectPixel в первую очередь убедитесь, что в расширении выставлен масштаб 1, в браузере и операционной системе - масштаб 100%
• каждый блок и секция рассматриваются по отдельности, т.е. недочеты предыдущего блока не переносятся на следующий, а при переходе проверки на следующий блок, мы его выравниваем с наложенным изображением
• относительно текста проверяем его выравнивание, отступы до границы блока. Размеры текста проверяются только по высоте. Отличие в ширине слов и отступах между буквами при сопоставлении макета и вёрстки не считается ошибкой, если используется правильный шрифт с правильно указанными свойствами
• исчезновение карточки питомца в слайдере (между проверяемыми разрешениями) может происходить в любой момент и удалением контента не считается (баллы не снимаем)

Как сабмитить задание

• Задание shelter. week-2 проверяется в ходе кросс-чека.
• После выдачи задания, но до наступления дедлайна зайдите в rs app https://app.rs.school/, выберите Cross-Check: Submit, в выпадающем списке выберите название задания, в поле Solution URL добавьте ссылку на задеплоенную страницу main или pets с вёрсткой, нажмите кнопку Submit.

Рекомендации по сабмиту

• Засабмитить задание рекомендуется как можно раньше, как только в rs app появится такая возможность. После сабмита задание можно продолжать выполнять до самого дедлайна
• Так как проект выполняется в приватном репозитории, сабмитить ссылку на репозиторий или pull request нет смысла - проверяющий его не увидит. Приватный репозиторий школы видите только вы сами, админы курса, и увидят ваши менторы, когда они появятся
• Убедитесь, что задеплоенная вами ссылка открывается в режиме инкогнито браузера

Проверка задания shelter. week-2

• инструкция по проведению cross-check: https://docs.rs.school/#/cross-check-flow

---

shelter. week-3

Добавление функционала при помощи JavaScript

• Описание и требования задания

В этой части задания необходимо добавить в свёрстанные на предыдущих этапах веб-страницы следующий функционал, используя чистый JavaScript:

• открытие и закрытие бургер-меню на страницах при ширине <768px
• бесконечный слайдер-карусель на странице Main
• пагинацию на странице Pets
• попап на обеих страницах

❗ Каждый DOM-объект (блок) с описанием питомца, будь то слайдер, пагинация или попап, будет генерироваться из данных объекта с соответствующих полей. Сами объекты собираются в единый файл. Всего должно быть описание 8 питомцев. Пример данных приведен в разделе материалы

Материалы:

• Пример данных 8 питомцев в формате JSON
• Макет в figma

Порядок работы

1. Задание выполняется в приватном репозитории школы.
2. От ветки shelter создайте ветку shelter-part3 в ней уже будет находиться папка shelter с файлами проекта
3. Продолжите выполнение задания в созданной ветке.
4. Проверьте соответствие вашей работы Требованиям к функционалу
5. Cамостоятельно оцените свою работу согласно предложенным Критериям оценки
6. Самооценку своей работы выведите в консоль браузера.
7. Создайте и замержите Pull Request из ветки shelter-part3 в ветку shelter. Название Pull Request произвольное. Описывать данный Pull Request нет необходимости.
8. После окончания кросс-чека предыдущей части задания обновите деплой вашей работы. Например, создайте и замержите Pull Request из ветки shelter в ветку gh-pages. Название Pull Request произвольное. Описывать данный Pull Request нет необходимости.
9. После завершения работы отредактируйте Pull Request из ветки shelter в ветку main, дополнив его функционалом третьей части задания. Мержить данный Pull Request не нужно.
10. Ссылку на деплой засабмитьте в rs app раздел "Cross-Check Submit"
11. После дедлайна таска стартует кросс-чек. Продолжительность кросс-чека три дня. Для получения балла за таск необходимо проверить все присланные на проверку работы и засабмитить в rs app результат проверки.

Требования к функционалу

1. Реализация burger menu на обеих страницах: +26
   • при ширине страницы меньше 768рх панель навигации скрывается, появляется бургер-иконка: +2
   • при нажатии на бургер-иконку, справа плавно появляется адаптивное меню шириной 320px, бургер-иконка плавно поворачивается на 90 градусов: +4
   • высота адаптивного меню занимает всю высоту экрана: +2
   • при повторном нажатии на бургер-иконку или на свободное от бургер-меню пространство адаптивное меню плавно скрывается уезжая за правую часть экрана, бургер-иконка плавно поворачивается на 90 градусов обратно: +4
   • бургер-иконка создана при помощи html+css, без использования изображений: +2
   • ссылки в адаптивном меню работают, обеспечивая плавную прокрутку по якорям, сохраняются заданные на первом этапе выполнения задания требования интерактивности элементов меню: +2
   • при клике по любой ссылке (интерактивной или неинтерактивной) в меню адаптивное меню плавно скрывается вправо, бургер-иконка поворачивается на 90 градусов обратно: +2
   • расположение и размеры элементов в бургер-меню соответствует макету (центрирование по вертикали и горизонтали элементов меню, расположение иконки). При этом на странице Pets цветовая схема может быть как темная, так и светлая: +2
   • область, свободная от бургер-меню, затемняется: +2
   • страница под бургер-меню не прокручивается: +4
2. Реализация слайдера-карусели на странице Main: +36
   • при нажатии на стрелки происходит переход к новому блоку элементов: +4
   • смена блоков происходит с соответствующей анимацией карусели (способ выполнения анимации не проверяется): +4
   • слайдер бесконечен, т.е. можно бесконечно много нажимать влево или вправо, и каждый раз будет прокрутка в эту сторону с новым набором карточек: +4
   • при переключении влево или вправо прокручивается ровно столько карточек, сколько показывается при текущей ширине экрана (3 для 1280px, 2 для 768px, 1 для 320px): +4
   • каждый новый слайд содержит псевдослучайный набор карточек животных, т.е. формируется из исходных объектов в случайном порядке со следующими условиями:
     • в текущем блоке слайда карточки с питомцами не повторяются: +4
     • в следующем блоке нет дублирования карточек с текущим блоком. Например в слайдере из 3 элементов, следующий выезжающий слайд будет содержать 3 (из 8 доступных) новых карточки питомца, таких, каких не было среди 3х карточек на предыдущем уехавшем слайде: +4
     • сохраняется только одно предыдущее состояние. Т.е. при последовательном переходе два раза влево, а потом два раза вправо, мы получим набор карточек, отличный от исходного: +4
     • при каждой перезагрузке страницы формируется новая последовательность карточек: +2
     • генерация наборов карточек происходит на основе 8 объектов с данными о животных: +2
   • при изменении ширины экрана (от 1280px до 320px и обратно), слайдер перестраивается и работает без перезагрузки страницы (набор карточек при этом может как изменяться, так и оставаться тем же, скрывая лишнюю или добавляя недостающую, и сохраняя при этом описанные для слайдера требования): +4
3. Реализация пагинации на странице Pets: +36
   • при перезагрузке страницы всегда открывается первая страница пагинации: +2
   • при нажатии кнопок > или < открывается следующая или предыдущая страница пагинации соответственно: +2
   • при нажатии кнопок >> или << открывается последняя или первая страница пагинации соответственно: +2
   • при открытии первой страницы кнопки << и < неактивны: +2
   • при открытии последней страницы кнопки > и >> неактивны: +2
   • в кружке по центру указан номер текущей страницы. При переключении страниц номер меняется на актуальный: +2
   • каждая страница пагинации содержит псевдослучайный набор питомцев, т.е. формируется из исходных объектов в случайном порядке со следующими условиями:
     • при загрузке страницы формируется массив из 48 объектов питомцев. Каждый из 8 питомцев должен встречаться ровно 6 раз: +4
     • при каждой перезагрузке страницы формируется новый массив со случайной последовательностью: +4
     • карточки питомцев не должны повторяться на одной странице: +4
     • при переключении страницы данные меняются (для >1280px меняется порядок карточек, для остальных - меняется набор и порядок карточек): +4
     • при неизменных размерах области пагинации, в том числе размерах окна браузера, и без перезагрузки страницы, возвращаясь на страницу под определенным номером, контент на ней всегда будет одинаков. Т.е. карточки питомцев будут в том же расположении, что и были до перехода на другие страницы: +2
     • общее количество страниц при ширине экрана 1280px - 6, при 768px - 8, при 320px - 16 страниц: +2
   • при изменении ширины экрана (от 1280px до 320px и обратно), пагинация перестраивается и работает без перезагрузки страницы (страница может оставаться той же или переключаться, при этом сформированный массив - общая последовательность карточек - не обновляется, сохраняются все остальные требования к пагинации): +4
4. Реализация попап на обеих страницах: +12
   • попап появляется при нажатии на любое место карточки с описанием конкретного животного: +2
   • часть страницы вне попапа затемняется: +2
   • при открытии попапа вертикальный скролл страницы становится неактивным, при закрытии - снова активным: +2
   • при нажатии на область вокруг попапа или на кнопку с крестиком попап закрывается, при этом при нажатии на сам попап ничего не происходит: +2
   • кнопка с крестиком интерактивная: +2
   • окно попапа (не считая кнопку с крестиком) центрировано по всем осям, размеры элементов попапа и их расположение совпадают с макетом: +2

Критерии оценки

Максимальная оценка за задание 110 баллов

Баллы за пункты требований указаны в разделе Требования к функционалу

❗Важно: на этом этапе не обязательно использовать картинки животных и их описание из макета. Можно сгенерировать собственные описания и подобрать другие фотографии, не нарушающие code-of-conduct! При этом сохраняется требование существования ровно 8 питомцев, на основе которых будут генерироваться карточки в слайдере, пагинации и данные в попап.

Все спорные моменты трактуются в пользу проверяемого студента.

Для удобства проверки выведите в консоль браузера самооценку своего проекта по пунктам с указанием баллов за каждый выполненный вами пункт.

❗Обратите внимание: Эффекты анимаций проверяются только в тех местах, где явно указано о плавности появления либо о конкретной анимации!

Штрафы

1. Верстка всего макета или отдельных блоков добавлена картинкой: -110
2. Использованы запрещенные техническими требованиями фреймворки, библиотеки, пакеты, надстройки: -110
3. Для реализации слайдера и (или) пагинации используются сторонние библиотеки или пакеты: -110

Как сабмитить задание

• Задание shelter. week-3 проверяется в ходе кросс-чека.
• После выдачи задания, но до наступления дедлайна зайдите в rs app https://app.rs.school/, выберите Cross-Check: Submit, в выпадающем списке выберите название задания, в поле Solution URL добавьте ссылку на задеплоенную страницу с вёрсткой, нажмите кнопку Submit.

Рекомендации по сабмиту

• Засабмитить задание рекомендуется как можно раньше, как только в rs app появится такая возможность. После сабмита задание можно продолжать выполнять до самого дедлайна
• Так как проект выполняется в приватном репозитории, сабмитить ссылку на репозиторий или pull request нет смысла - проверяющий его не увидит. Приватный репозиторий школы видите только вы сами, админы курса, и увидят ваши менторы, когда они появятся
• Убедитесь, что задеплоенная вами ссылка открывается в режиме инкогнито браузера

Проверка задания shelter. week-3

• инструкция по проведению cross-check: https://docs.rs.school/#/cross-check-flow =======