Крайний срок сдачи | Имя папки | Имя ветки |
---|---|---|
17.10.2021 17:59 UTC (20.59 UTC+3) | cssMemSlider | gh-pages |
Сверстать слайдер согласно требованиям:
Desktop:
Mobile:
- Слайдер позиционируется с равными отступами слева и справа;
- Расположение картинок, подписей к ним и контролов:
Desktop:
Mobile:
- Имеется анимация для смены картинок
- Имеется анимация для смены подписей к каринкам
- Подписи к картинкам должны быть строковыми значениями (текстом)
- Каждый контрол имеет большую область нажатия
- Контролы имеют интерактивность (момент наведения, момент нажатия, активный контрол, изменение курсора)
- создайте личный публичный репозиторий
cssMemSlider
- создайте
gh-pages
ветку (если таковой не имеется) - перейдите в эту (gh-pages) ветку и создайте папку
cssMemSlider
. Ваша работа будет доступна по ссылке например:https://${YOUR_GITHUB_NAME}.github.io/cssMemSlider/cssMemSlider/index.html
- выполняете таску в этой папке (cssMemSlider). В процессе выполнения задания должно быть не менее 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)
- После завершения работы откройте 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
- Выполнено всё из секции
Требования к репозиторию и как сабмитить задание
+30 - Слайдер позиционируется с равными отступами слева и справа +10
- Соблюдено расположение картинок, подписей к ним и контролов +10
- Имеется анимация для смены картинок +20
- Имеется анимация для смены подписей к картинкам +10
- Подписи к картинкам должны быть строковыми значениями (текстом), т.е. текст не должен быть частью картинки +15
- Каждый контрол имеет большую область нажатия, чем размер самого контрола +5
- Контролы имеют интерактивность (момент наведения, момент нажатия, активный контрол, изменение курсора) +10
- Имеется мобилная версия слайдера и соблюдено расположение картинок, подписей к ним и контролов +20
- Используются относительные едициы измерения для основных блоков (rem, em, %, vh, vw, fr and etc... ) +10
- Все блоки/составные части слайдера (контролы, картинки, подписи к слайдеру) спозиционированы без использования
position: absolute
+10
- Использование каких-либо скриптов/библиотек -100500
- Использование апфрусцированного (не человекочитаемого) CSS/HTML -100500
- Списывание -100500
❗ Размеры каждого блока/шрифт и контент слайдера, дизайн - на усмотрение разработчика. Отклонения могут варьироваться значительно. Оценку за это не снижаем. Гланое соблюсти позиционирование/расположение блоков (картинки, контролы, подписи) и другие технические требования.
❗ Подбор мемасов - на усмотрение разработчика, но желательно не менее 4 штук ;)
Всем успехов и удачи!