Skip to content

Latest commit

 

History

History
170 lines (121 loc) · 18.7 KB

wildlife.md

File metadata and controls

170 lines (121 loc) · 18.7 KB

wildlife

Задание: сверстать страницу согласно макету.

wildlife

Макет Wildlife

После того как авторизуемся в Фигме и открываем проект, он будет отображаться во вкладке Recent. Чтобы его продублировать себе (и иметь права редактирования в своей копии) нужно нажать по проекту правой кнопкой и выбрать функцию Duplicate, после чего можно будет найти редактируемую копию проекта во вкладке Drafts — это позволит удобнее с проектом работать при верстке.

  • Точное совпадение с макетом не требуется. Основное требование - визуальное сходство вёрстки и страницы макета. Допускается отклонение от макета на 5px по горизонтали и 10px по вертикали.
  • Адаптивность не проверяется, но рекомендуется. Постарайтесь сделать сайт адаптивным, то есть подстраивающимся под размер экрана и отображающимся на небольших экранах без появления полосы прокрутки.
  • Работающий слайдер не требуется, но если можете - сделайте.
  • Если в строке несколько объектов визуально одинаковой ширины, то ширина содержащих их блоков должны быть одинаковой.
  • «Интерактивный» означает, что у элемента появляется визуальный эффект или анимация при каких-либо действиях пользователя, например, при наведении курсора или нажатии. Обычно такой эффект реализуют при помощи следующих свойств:
    • cursor: pointer,
    • background,
    • text-decoration: underline,
    • color
  • Ширина макета 1440px, ширина контентной части 1200px. Макет позиционируем по центру с равными отступами по краям. Блокам задаём цвет фона, растягивая их во всю ширину экрана. Блоки Header и Survival - background-color: #02160b, блоки Latest articles и Get notified background-color: #cccccc, блок Footer - background-color: #181617.
  • Фоновые изображения могут как оставаться в пределах 1440px, так и растягиваться во всю ширину страницы.
  • требования к вёрстке отдельных блоков указаны в критериях оценки.

Требования к репозиторию /после 28.02/

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

  • Задание выполняется в вашем личном приватном репозитории.
  • Название репозитория - wildlife
  • Разработка ведётся в главной ветке репозитория - main (или master)
  • Для деплоя используйте netlify. Название страницы дайте по схеме: имя гитхаб аккаунта - название таска
  • После старта основного этапа 28.02 задание нужно будет перенести в приватный репозиторий школы.

Для этого:

  1. Ознакомьтесь с порядком работы с приватным репозиторием школы
  2. Склонируйте на компьютер свой личный приватный репозиторий, в котором выполнили таск wildlife
  3. Склонируйте на компьютер приватный репозиторий школы. Создайте в нём ветку wildlife. Для этого зайдите в папку репозитория, выполните команду
git checkout -b wildlife
  1. В локальной папке приватного репозитория школы создайте подпапку wildlife, скопируйте в неё файлы вёрстки, например, index.html, style.css, папку assets с медиафайлами
  2. Находясь внутри папки приватного репозитория школы, последовательно выполните команды
git add .
git commit -m "feat: add wildlife"
git push origin wildlife

В школьном репозитории у вас появилась ветка wildlife, внутри неё папка wildlife, внутри неё файлы проекта. История коммитов при таком переносе не сохраняется, требования к коммитам к данному таску не относятся.

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

(указанные требования не относятся к таску, который был перенесён в репозиторий школы из личного репозитория)

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

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

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

  • Вёрстка проверяется в браузере Google Chrome последней версии
  • Запрещается использование CSS-фреймворков (bootstrap, foundation и т.д.)
  • Допускается использование CSS препроцессоров, normalize.css

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

  • Задание будут проверяться посредством кросс-чека.
  • Для удобства проверки рекомендуется записать (например, с помощью OBS ) и разместить на YouTube небольшое видео для проверяющих с объяснением как реализован каждый пункт из перечисленных в критериях оценки. Ссылку на видео добавьте в описание pull request.
  • В footer приложения замените иконку Telegram на иконку YouTube со ссылкой на видео.
    Чтобы изменить цвет svg-иконки, откройте её в текстовом редакторе (например, Блокнот) при помощи поиска найдите свойство fill и замените fill:#ff0000 на fill:#134731
    Данный пункт носит рекомендательный характер, отсутствие видео с самооценкой не является поводом для снижения балла за таск.

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

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

Засабмитить задание необходимо как можно раньше, как только в rs app появится такая возможность. После сабмита задание можно продолжать выполнять до самого дедлайна.

Возможность сабмита этого задания будет добавлена в rs app 07.03.

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

Максимальный балл за задание +50

1. Блок Header +10

  • Блок Header содержит только логотип и панель навигации. Наличие блоков-обёрток во внимание не принимаем
  • Логотип содержит два элемента - svg-иконку и текст. SVG может быть добавлен любым способом. Обращаем внимание на формат, а не на способ добавления
  • На странице обязательно должен присутствовать один элемент <h1>. Расположите его на свое усмотрение. Не проверяем какой именно элемент указан как h1, главное, чтобы он был и был только один
  • Панель навигации состоит из четырёх элементов: двух ссылок, иконки поиска и кнопки "Sign in" . Верстается в виде ненумерованного списка: ul > li > a. Если кнопка "Sign in" верстается не как ссылка, а тегом button, это не ошибка
  • Все элементы панели навигации должны быть интерактивными

2. Блок Survival +10

  • Расстояние между буквами заголовка регулируется css-свойством letter-spacing
  • Разрывы строк в текстовом блоке регулируются шириной блока без использования тега <br>
  • Кнопка Donate интерактивная. Используются указанные в макете стили для различных состояний кнопки
  • У блоков Header и Survival общее фоновое изображение

3. Блок Latest articles +10

  • Для вёрстки трёх изображений в ряд лучше использовать flexbox или grid. Float использовать можно. <table> - нельзя!
  • Надписи поверх изображений можно разместить при помощи абсолютного позиционирования. Менее семантически правильный, но более простой в реализации вариант - использовать для добавления изображений css-свойство background-image.
  • Стрелки слайдера интерактивны.

4. Блок Get notified +10

  • Для отправки данных используется тег <form>
  • Поле email верстается тегом <input> с типом text или email (оба варианта допустимы), поле send верстается тегом <input> с типом submit
  • Надпись 'email' это placeholder.

5. Блок Footer +10

  • Блок Footer содержит логотип, дополнительную панель навигации и ссылки на социальные сети
  • Логотип полностью повторяет логотип блока Header. Речь о визуальном сходстве, а не использовании точно таких же тегов
  • Дополнительная панель навигации и ссылки на социальные сети верстаются в виде ненумерованных списков: ul > li > a
  • Иконки социальных сетей верстаются с использованием svg-файлов в качестве фоновых изображений
  • Все ссылки в футере должны быть интерактивными

Pixel Perfect. Штрафные баллы

  • В первую очередь обращаем внимание на визуальное сходство созданного сайта и макета.
  • Проверку Pixel Perfect стоит проводить в разрешении экрана десктопа (окна операционный системы на мониторе) 100%.
  • Если разрешение вашего экрана меньше ширины макета (1440px), проверка проводится с применением device toolbar при помощи выставления там ширины 1440 в режиме responsive
  • В браузере Google Chrome при помощи расширения PerfectPixel проверяем соответствие наложения импортированного из figma изображения макета на страницу сайта.
  • Если визуальные отличия элементов или блоков составляют более 5px по горизонтали или более 10px по вертикали, то ставим -2 балла единовременно за каждый логический блок, в котором присутствует ошибка. Сами блоки при этом рассматриваются по раздельности, т.е. недочеты предыдущего блока не переносятся на следующий, а при переходе проверки на следующий блок, мы его выравниваем с наложенным изображением.
  • Относительно текста проверяем размеры только по высоте. Ширину слов и отступ между буквами не учитываем при сопоставлении макета и вёрстки.
  • Общее количество баллов за блок с учётом штрафных баллов не может быть ниже нуля.
  • Не является ошибкой замена в footer приложения иконки Telegram на иконку YouTube
  • Проверяем только положение элементов на странице, на возможные отличия в положении фонового изображения внимания не обращаем, баллы за это не снимаем

Возможные варианты выполнения задания

(добавлены 11.03)

  1. Блоки Header и Footer
    Фоновые изображения могут как оставаться в пределах 1440px, так и растягиваться во всю ширину страницы. Проверка Pixel Perfect учитывает только положение элементов на странице, на возможные отличия в положении фонового изображения внимания не обращаем, баллы за это не снимаем
  2. Блок Header
    Кнопка "Sign in" может верстаеться как тегом a, так и тегом button
  3. Блок Get notified
    Поле email верстается тегом <input> с типом text или email (оба варианта допустимы)

Cross-check

  • инструкция по проведению cross-check: https://docs.rs.school/#/cross-check-flow
  • форма для проверки задания https://wildlife-cross-check.netlify.app/
  • видеоинструкция по проведению cross-check: https://youtu.be/aVUmgy0UcUU
    Обратите внимание. Видеоинструкция не учитывает возможные варианты выполнения задания, добавленные 11.03, поэтому некоторые пункты, указанные в ней как ошибки, сейчас являются допустимыми. Не является ошибкой:
    • использование тега button для вёрстки кнопки "Sign in"
    • использование тега <input> с типом email для вёрстки поля email
    • растягивание фонового изображения во всю ширину экрана

Материалы