RS School 2020Q1 markup task „Singolo“

Final	Task „Singolo. Part 1“	Task „Singolo. Part 2“	Task „Singolo. Part 3“	Task „Singolo DOM“
Full site deploy	Deploy of part 1	Deploy of part 2	Deploy of part 3	Deploy of DOM task

Общие требования

Ключевым моментом является полное соответствие макету (singolo.psd, singolo.jpg). Это достигается совпадением двух изображений при наложении слоя с картинкой поверх готового решения с помощью браузерного расширения Pixel Perfect (Chrome). Уделите внимание следующим важным и распространенным моментам:

• Основные блоки должны быть идеально расположены на заданной ширине экрана (1020px).
• Изображения, логотипы (если они есть) должны быть идеально расположены в рамках логического контейнера.
• Иконки должны сохранять идеальное расстояние до соответствующего им текста.
• Если использован правильный шрифт, проверьте высоту текста — он должен соответствовать исходнику. Ширина может варьироваться. Но общепринятой практикой является добавление свойства межбуквенного интервала (letter-spacing) тексту заголовков, девиза (motto) или цитат.
• Если в строке несколько объектов визуально одинаковой ширины, то ширина содержащих их блоков должна быть одинаковой. Разница в несколько пикселей не имеет значения, важно совпадение размеров.
• Если нужно добавить тень, можно использовать один из подходов:
  • Объединить слои в графическом редакторе и использовать изображение в качестве фонового.
  • Добавить тень как box-shadow и подобрать такие значения для этого свойства, при которых она будет максимально похожа на тень в макете.

Кроссбраузерность

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

Репозиторий

• Репозиторий с решением публичный.
• index.html и style.css (изменены не позже 08.03.2020 23:59).
• singolo1.html и singolo1.css (изменены не позже 23.02.2020 23:59).
• singolo2.html и singolo2.css (изменены не позже 01.03.2020 23:59).
• singolo3.html и singolo3.css (изменены не позже 08.03.2020 23:59).
• Изображения, шрифты и другие вспомогательные файлы лежат в папке assets.

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

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

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

1. Header (<header> содержит только логотип и панель навигации)

• Интерактивная панель навигации.
• Логотип содержит 2 разных текстовых элемента, белый и красный.
• На странице обязательно должен присутствовать один элемент <h1>. Расположите его на свое усмотрение.
• Внизу есть небольшая линия другого цвета, будьте внимательны.

2. Блок Slider

• Стрелки должны быть интерактивными. При нажатии ничего происходить не должно (слайды могут не листаться).

Картинки в слайдере можно реализовать тремя способами. Выберите один из них:

1. Создайте изображения наложением нескольких слоев, используя z-index. Элементы должны быть в position: absolute. Изображения телефонов так же могут быть сделаны средствами CSS.

• 2. Создайте полные изображения вертикального и горизонтального телефонов с помощью графического редактора (фотошоп или аналог), объединив все слои.

3. Объедините оба предыдущих варианта и создайте изображения трёх отдельных элементов: тень, контейнер телефона, внутреннее изображение на экране. В таком случае одно и то же изображение телефона и тени можно использовать для обеих картинок, просто повернув их на 90 градусов и 180 градусов. Тень можно сделать с помощью CSS.

• Внизу есть небольшая линия другого цвета, будьте внимательны.

3. Блок Our Services

• Трёхколоночный макет снизу. Лучше использовать flexbox или grid. Float использовать можно. <table> - нельзя!
• Изображения можно экспортировать как иконки вместе с кругами. Другой вариант - экспортировать только сами иконки, а круги добавить свойством border-radius.
• Если в текстовой ячейке больше текста, чем она вмещает, и текст начинает выходить за границы элемента, то выступающая часть должна быть скрыта.
• Внизу есть небольшая линия другого цвета, будьте внимательны.

1. Блок Portfolio

• Интерактивные кнопки навигации.
• Четырехколоночный макет с изображениями.
• Если в сетку добавить больше элементов с изображениями (например, 15) - то следющие за 12-м не должны показываться (т.е. 13, 14, 15 не видны).
• Внизу есть небольшая линия другого цвета, будьте внимательны.

2. Блок About Us

• Трёхколоночный макет снизу.
• Имя, если оно очень большое, все равно должно занимать ровно одну строку.
• Интерактивные социальные иконки.
• Внизу есть небольшая линия другого цвета, будьте внимательны.

1. Блок Get a Quote

• Все элементы ввода - часть формы
• Форма должна быть интерактивной, а именно иметь возможность отправлять запрос. Добавьте кнопку 'Submit' куда-либо на ваше усмотрение. Кнопка должна находиться внутри формы.
• 2 поля помечены как (Required). Это значит, что должна быть хотя бы базовая валидация на text и на email.
• На всех полях должен быть placeholder.
• Указатель на номер телефона - должен быть ссылкой типа tel.
• Указатель на email - должен быть ссылкой типа mail.
• Внизу есть небольшая линия другого цвета, будьте внимательны.

2. Footer (<footer> - это серая панель снизу)

• Интерактивные иконки

Требования для задания Singolo DOM

Оценивается только функциональная часть приложения, не вёрстка и не Pixel Perfect.

• В корневой папке есть файл script.js
• script.js подключен к index.html
• Не использовать фреймворки и библиотеки (jquery, lodash и др.) Используем ванильный JavaScript.

1. Header (<header> содержит только логотип и панель навигации)

• Кликаем на неактивный пункт меню, он становится активным, другие неактивными. Страница скроллится на заданную позицию. <header> может быть fixed или sticky — это не влияет на оценку.

2. Блок Slider

• При клике на стрелки изображения должны меняться в указанном стрелкой направлении. Если достигается последний элемент направления, следующим при клике будет первый и так до бесконечности. Можно сделать слайд цельной картинкой — это не ошибка. Стрелки могут менять цвет при перелистывании или оставаться одного цвета — это не влияет на оценку.
• При клике на телефон (с экраном или без) или кнопку телефона (внизу у вертикального и слева у горизонтального), его экран становится черного цвета (гаснет).
• При повторном клике экран заполняет предусмотренное для него изображение.
• При перелистывании слайдера состояние телефона может не сохраняться, это не ошибка.

1. Блок Portfolio

• Кликаем на неактивный тэг, он становится активным, другие неактивными. Активный тэг может быть не кликабельным и не интерактивным — это не ошибка.
• При клике на тег изображения портфолио меняют свои позиции, сдвигаясь на одинаковую величину (либо перемещаясь в случайном порядке).
• При клике на изображение портфолио оно обрамляется рамкой толщиной в 5px, закрашенная цветом #F06C64.
• При клике на другую картинку, текущая теряет рамку, а у новой она появляется.
• Теги могут переключаться с сохранением рамки картинки или без него — это не влияет на оценку.
• При повторном клике на обрамленное изображение, рамка может пропадать или нет — это не влияет на оценку.
• Обрамленное изображение может быть интерактивным, а может нет — это не влияет на оценку.

1. Блок Get a Quote

• При клике на кнопку формы submit'а быть не должно — надо скриптами запретить форме отправлять данные.
• Если обязательные данные не введены, форма предупреждает пользователя об этом, пока он не введет их.
• Если обязательные данные введены, появляется окно с макета, на котором есть:
  • Строка Письмо отправлено,
  • Строка Тема: Без темы, но если поле subject заполнено, подставляется значение оттуда,
  • Строка Описание: Без описания, но если поле description заполнено, подставляется значение оттуда,
  • Кнопка OK под строками, при клике на нее окно скрывается.
• Таким образом, в окно выводятся введенные в соответствующие поля данные, либо текст выше, если эти поля не заполнены.
• Текст модального окна и текст для пустых полей могут быть заменены английскими аналогами — это не влияет на оценку.
• Введенные пользователем данные преобразовывать не надо.
• Можно скрыть слишком длинный текст в модальном окне, можно не скрывать. Переполнение текстом — не ошибка.
• Можно ограничить поле ввода description по кол-ву символов или нет — это не влияет на оценку.
• Клик на области вокруг окна может скрывать его — это не влияет на оценку
• Модальное окно может скрываться по таймеру или нет — это не влияет на оценку.
• Страница может скроллиться при открытом модальном окне или нет — это не влияет на оценку.
• Модальное окно может быть сделано через функцию alert() — это не влияет на оценку, хотя и не приветствуется.

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

Если задание выполнено полностью и проверяющий не обнаружил никаких дефектов, вы получаете 100 баллов. Это касается разметки и использования HTML и CSS.

1. За сдачу не вовремя вы можете потерять до 40 баллов от общего результата!
2. Несоблюдение стандартов кода или требований синтаксиса может привести к потере до 20 баллов.
3. Несовпадение с PSD-шаблоном (за исключением нюансов со шрифтами) может привести к потере до 40 баллов.
4. Невыполнение какого-либо из технических требований может привести к потере от 3 до 10 баллов.