Рубежный контроль

Общее описание задания на рубежный контроль

Создать страницу (index.html), которая содержит подборки по одному из направлений и список, который может наполнить сам пользователь.

Ссылка для принятия задания

Главные требования

1. Работа выполнена самостоятельно.
2. Работа написана во время занятия.
3. В работе не использованы сторонние библиотеки и компоненты.
4. Не менее трех коммитов за авторством студента, равномерно распределенных по времени выполнения задания.
5. Работа размещена на удаленном репозитории на Github, который создан через Github Classroom. (Без этого работа не проверяется)
6. Работа размещена на хостинге (сервер Мосполитеха) или другом.

Варианты - Тематика

• Вариант 1 - Frontend
• Вариант 2 - Backend
• Вариант 3 - Тестировщик
• Вариант 4 - UX Дизайнер
• Вариант 5 - Архитектор

Материалы

Информационное наполнение

• https://roadmap.sh/

Цветовые палитры

• http://a11yrocks.com/colorPalette/
• https://clrs.cc/a11y/
• https://venngage.com/tools/accessible-color-palette-generator

Шрифты

• https://gwfh.mranftl.com/fonts

Задание

Перед началом работы создайте новую ветку в проекте. В конце работы откройте pull request на github вашей ветки с основной.

Документ index.html содержит:

1. Header:
   1. Логотип в растровом формате (с srcset и x дескриптором).
   2. Навигационное меню (nav) с якорными ссылками на разделы страницы.
2. Основную часть:
   1. Hero-раздел с названием направления, кратким описанием, изображением и призывом к обучению. Должно занимать весь первый экран.
   2. Раздел с подзаголовком и набором из трех или более слайдов в карусели с описанием тем для изучения со ссылками:
      1. Слайды переключаются по клику на кнопки влево, вправо.
      2. Текст структурирован, семантически размечен и имеет форматирование.
      3. Добавлено изображение в каждый слайд (логотип технологии/стандарта или схема).
   3. Часть с подзаголовком и редактируемым списком:
      1. Поле для ввода текста, кнопка для добавления элемента в список.
      2. В списке отображается название элемента и кнопка для удаления элемента списка.
      3. У подзаголовка есть счетчик, который показывает количество элементов в списке.
3. Footer:
   1. ФИО, группа, дата РК.

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

Общие

1. Страница отзывчива (RWD + mobile-first).
2. Страница удовлетворяет критериям доступности.
3. Проект структурирован. Файлы проекта распределены по папкам.
4. Код отформатирован (легко читаем).

HTML

1. HTML валиден.
2. Использованы семантические теги.

CSS/SCSS

1. Элементы стилизованы (цвета, шрифты), логичные внутренние и внешние отступы, аккуратное выравнивание.
2. Использована методология БЭМ при именовании классов. Нет ошибок, понятные имена классов.
3. Верстка не “ломается” и данные читаются корректно при изменении размера (объема) контента.
4. Элементы страницы хорошо читаемы.
5. Подключен из папки вашего проекта и использован шрифт.
6. Изменено оформление у элементов формы.
7. Изменяется оформление элемента при наведении на него курсора.
8. Добавлен переход (transition).
9. Добавлена анимация.
10. Страница отзывчива (RWD). Адекватно отображаются при ширине экрана от 320px до 2560px:
    1. На малых экранах нет горизонтальной прокрутки и контент не прилипает к краям.
    2. На больших экранах страница ограничена по ширине и не расползается.
11. SASS/SCSS.

JavaScript

1. Реализован функционал слайдера.
2. Реализован функционал списка:
   1. Добавление нового элемента списка по нажатию на кнопку с иконкой.
   2. При добавлении нового элемента поле очищается.
   3. Удаление элемента списка с помощью кнопки в этом элементе списка.
3. Реализован функционал счетчика.
4. Отсутствуют ошибки в консоли браузера при работе пользователем со списком.

После занятия

Разместить работу на хостинге (сервер Мосполитеха) или другом, например Netlify.