h4rb4rd/css-mem-slider

Крайний срок сдачи	Имя папки	Имя ветки
17.10.2021 17:59 UTC (20.59 UTC+3)	cssMemSlider	gh-pages

Домашнее задание: CSS Mem Slider

Сверстать слайдер согласно требованиям:

Desktop:

Mobile:

1. Слайдер позиционируется с равными отступами слева и справа;
2. Расположение картинок, подписей к ним и контролов:

Desktop:

Mobile:

3. Имеется анимация для смены картинок
4. Имеется анимация для смены подписей к каринкам
5. Подписи к картинкам должны быть строковыми значениями (текстом)
6. Каждый контрол имеет большую область нажатия
7. Контролы имеют интерактивность (момент наведения, момент нажатия, активный контрол, изменение курсора)

Controls effects:

Требования к репозиторию и как сабмитить задание

1. создайте личный публичный репозиторий cssMemSlider
2. создайте gh-pages ветку (если таковой не имеется)
3. перейдите в эту (gh-pages) ветку и создайте папку cssMemSlider. Ваша работа будет доступна по ссылке например: https://${YOUR_GITHUB_NAME}.github.io/cssMemSlider/cssMemSlider/index.html
4. выполняете таску в этой папке (cssMemSlider). В процессе выполнения задания должно быть не менее 5 коммитов.
5. Названия коммитов должны быть согласно гайдлайну + каждый ваш коммит должен содержать тайм-стемп например название коммитов:

init: start cssMemSlider-task (Mon, Sep 13, 2021 10:12:24 PM)

feat: add basic page layout (Mon, Sep 13, 2021 10:25:24 PM)

6. После завершения работы откройте Pull Request из ветки gh-pages в ветку main. Название Pull Request дайте по названию задания. Описание Pull Request дайте по схеме. Мержить данный Pull Request не нужно. Ссылку на данный пулл реквест необходимо сабминтуть в форму кросс-чека. В пулл реквесте необходимо досконально описать, что сделано и что нет. В частности - описаны все разрешения, при которых проверяющему необходимо смотреть - например: мобильная версия 320x568, версия для ПК - 1920×1080.

❗ В общем и целом помните, что если у проверяющего возникнут какие-либо потенциальные вопросы к автору работы на кросс-чеке - он должен найти все ответы в вашем описании к Pull Request.

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

• Задание будут проверяться посредством кросс-чека. Инструкция по проведению cross-check

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

• Запрещается использование CSS-фреймворков (bootstrap, foundation и т.д.)
• Запрещается использование каких-либо js скриптов и нпм пакетов
• Запрещается использование CSS препроцессоров (необходимо использовать только чистый CSS)
• Поддержка браузера Google Chrome
• Допускается добавление тегов типа h1, footer, header и т.д. для увеличения контента всей страницы

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

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

1. Выполнено всё из секции Требования к репозиторию и как сабмитить задание +30
2. Слайдер позиционируется с равными отступами слева и справа +10
3. Соблюдено расположение картинок, подписей к ним и контролов +10
4. Имеется анимация для смены картинок +20
5. Имеется анимация для смены подписей к картинкам +10
6. Подписи к картинкам должны быть строковыми значениями (текстом), т.е. текст не должен быть частью картинки +15
7. Каждый контрол имеет большую область нажатия, чем размер самого контрола +5
8. Контролы имеют интерактивность (момент наведения, момент нажатия, активный контрол, изменение курсора) +10
9. Имеется мобилная версия слайдера и соблюдено расположение картинок, подписей к ним и контролов +20
10. Используются относительные едициы измерения для основных блоков (rem, em, %, vh, vw, fr and etc... ) +10
11. Все блоки/составные части слайдера (контролы, картинки, подписи к слайдеру) спозиционированы без использования position: absolute +10

Штрафные баллы

• Использование каких-либо скриптов/библиотек -100500
• Использование апфрусцированного (не человекочитаемого) CSS/HTML -100500
• Списывание -100500

❗ Размеры каждого блока/шрифт и контент слайдера, дизайн - на усмотрение разработчика. Отклонения могут варьироваться значительно. Оценку за это не снижаем. Гланое соблюсти позиционирование/расположение блоков (картинки, контролы, подписи) и другие технические требования.

❗ Подбор мемасов - на усмотрение разработчика, но желательно не менее 4 штук ;)

Всем успехов и удачи!