/css-slider

CSS Slider

Deploy link: cssMemSlider

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

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

Desktop:

screenshot

Mobile:

screenshot

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

Desktop:

screenshot

Mobile:

screenshot

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

Controls effects: screenshot

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

  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)

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

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

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

  • Запрещается использование 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 штук ;)

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