css-slider

Deploy link: cssMemSlider

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

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

Desktop:


Mobile:


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

Desktop:


Mobile:


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

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. Названия коммитов должны быть согласно гайдлайну + каждый ваш коммит должен содержать тайм-стемп

   5.1. тайм-стемп может быть на любом языке; по тайм-стемпу должно быть понятно, когда этот коммит был сделан: день недели, месяц, число, год, точное время до секунд (очередность может быть произвольная) например название коммитов:

   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 и т.д. для увеличения контента всей страницы
• Разрешается/допускается использование gif картинок
• Разрешается/допускается px для синтаксиса медиа квери
• Разрешается/допускается, что в репозитории есть первый коммит, генерируемый автоматически гитхабом Initial commit
• Разрешается/допускается использование reset.css и normalize.css

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

Максимальный балл за задание 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. Все блоки/составные части слайдера (контролы, картинки, подписи к слайдеру) находя в базовом потоке дом-элементов, не позиционируются с помощью top, left, right, bottom. Не используются псевдоэлементы. +10

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

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

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

❗ мобильная версия должна быть мобильной версией, например мобильная версия 1900х1000, версия для ПК - 1920×1080 является ошибкой.

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

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