Skip to content

Latest commit

 

History

History
76 lines (51 loc) · 9.19 KB

online-zoo.md

File metadata and controls

76 lines (51 loc) · 9.19 KB

online-zoo

Предварительная версия задания в которую могут вноситься правки. Окончательная версия будет доступна после выдачи задания

Дата выдачи Deadline Folder name Branch name
online-zoo online-zoo

Даты выдачи и дедлайны тасков находятся в расписании

Описание проекта online zoo:
Это онлайн-зоопарк, который дает возможность увидеть питомцев в каком-либо из зоопарков или в дикой природе, где имеются камеры постоянной трансляции. Выбор осуществляется либо выбором питомца с главной страницы, либо со страницы карты, либо выбором из меню с иконками животных на странице с трансляцией. Также присутствует возможность покормить животное онлайн. Процесс визуально описывается так: При нажитии на кнопку Feed открывается поп-ап, после того как пользователь заполняет поля оплаты, животному в вольер приносят еду. Мы не будем делать сервис транзакций и прочее, но визульная реализация должна быть в полном объеме.

На макете 4 страницы:

  • Лендинг, основная страница
  • Страница с картой
  • Страница с животным (4 разных питомца выполненных по одному образцу)
  • Страница обратной связи

На макете 2 всплывающих окна:

  • Together we care, save and protect!
  • Make your donation

Поддерживаемые разрешения (ширина):

  • 1920px
  • 1200px
  • 640px
  • 320px

Выполнить задание согласно макету автора Dinky: online zoo

Первое, что нужно сделать, - это сделать дубляж макета в фигме. Для этого, вверху экрана нажимаем на имя проекта, рядом с надписью "view only". Далее выбираем "Duplicate to your drafts", что создаст вам локальную копию, с которой вы сможете работать.

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

  • Задание выполняется в приватном репозитории школы Как работать с приватным репозиторием
  • В приватном репозитории школы создайте ветку с названием online-zoo, в ней создайте папку с названием online-zoo, и в ней разместите файлы проекта. Проект будет содержать несколько страниц. Поэтому внутри на уровне с assets будет располагаться папка pages. Внутри pages, в папках со своими именами будут храниться файлы .html, .css и .js, относящиеся к данной странице. В папке assets будут храниться изображения, иконки и файлы шрифтов, если есть. Как называть папки внутри assets: images, icons, fonts.
  • Для деплоя используйте gh-pages Как сделать деплой задания из приватного репозитория школы
  • История коммитов должна отображать процесс разработки приложения. Требования к коммитам

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

  • Задание будет проверяться целиком посредством кросс-чека после того, как будут выполнены все 4 технических задания, включая это. Инструкция по проведению cross-check

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

Поддержка браузеров: Google Chrome, Mozilla Firefox, Microsoft Edge (Windows) or Safari (MacOS).
В первую очередь мы разрабатываем для Google Chrome. Затем проверяем, не «рушат» ли Mozilla Firefox, Microsoft Edge или Safari наши стили.

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

Обратите внимание на следующие пункты:

  • Основные блоки должны быть точно расположены на заданной ширине экрана так, как на дизайне Figma.
  • Изображения, логотипы (если они есть) должны быть расположены в рамках логического контейнера с правильным подходом по центрированию и расположению. Допускается отклонение от макета в угоду сеточной или колоночной структуре.
  • Иконки, картинки должны сохранять идеальное расстояние до начала соответствующего им текста.
  • Имеются отдельно спроектированные блоки с описанием того, как выглядит кнопка с hover-эффектом, и без него.
  • Если использован правильный шрифт, проверьте высоту текста — он должен соответствовать исходнику. Ширина может варьироваться. Но общепринятой практикой является добавление свойства межбуквенного интервала (letter-spacing) тексту заголовков, девиза (motto) или цитат.
  • Если в строке несколько объектов визуально одинаковой ширины, то ширина содержащих их блоков должна быть одинаковой. Разница в несколько пикселей не имеет значения, важно совпадение размеров.
  • Если есть заголовки или пункты меню ПОЛНОСТЬЮ В ВЕРХНЕМ РЕГИСТРЕ, нужно проверить, чтобы было примененно свойство text-transform: uppercase.

«Интерактивный» означает, что у элемента появляется визуальный эффект или анимация (на ваше усмотрение: анимация курсора, изменение цвета заднего фона, затемнение, нижнее подчеркивание, изменение шрифта) при каких-либо действиях пользователя, например, при наведении курсора. Использовать JavaScript для обработки пользовательских событий в данном задании не обязательно. Обычно, такой эффект реализуют при помощи псевдокласса :hover и следующих свойств:

  • cursor: pointer,
  • background,
  • text-decoration: underline,
  • color.

❗ Примеры того, как кнопки или блоки должны себя вести при наведении, приведены в макете.

Полезные ссылки

Можно подключать как скачиванием локальных шрифтов, так и подключением шрифтов через url на google fonts. Если вы не можете найти или скачать нужный шрифт, просто замените его шрифтом с тем же типом засечек.