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

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

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

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

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

Полезные ресурсы

Цвета:

• Готовые цветовые палитры: https://colorhunt.co/, https://coolors.co/
• Подобрать самостоятельно https://color.adobe.com/create/color-wheel

Шрифты: https://fonts.google.com/ (Продвинутый способ: https://google-webfonts-helper.herokuapp.com/fonts)

Примеры внешнего вида

• https://dessign.net/web-developer-portfolio-examples/

Задание

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

• Шапка страницы:
  • Элемент ведущий на главную страницу (абсолютный путь до вашего домена): инициалы шрифтом из группы Display или произвольный логотип.
  • Ссылка на ваш профиль на github.
  • Навигационное меню (nav) с якорными ссылками на разделы страницы.
• Основная часть:
  • Крупный блок на весь первый экран (называется Hero Image или Jumbotron). Ваше имя, одно предложение о вас, кнопка с призывом связаться с вами, на фоне крупное изображение (можно взять тут https://unsplash.com/).
  • Список технологий и языков программирования с логотипами: что уже изучаете, что планируете в ближайшее время. Укажите опыт работы с технологией/языком программирования (полгода, год и т.д.). Списки стоит разместить в нескольких колонках.
  • Примеры ваших работ (скриншот, краткое описание, ссылка на сервер если есть) в виде карточек или карточки выполненных лабораторных работ по дисциплине “Основы веб-технологий”, номер, процент выполнения. В начале разделе есть ссылка со стрелкой “смотреть еще”.
  • Отзывы на ваши работы: рейтинг звездочками или другими изображениями, дата, отзыв, имя автора отзыва.
  • Контакты: почта, телефон, telegram и т.д. (можно использовать ненастоящие данные). Визуально выделите предпочтительный вариант для связи.
• Подвал:
  • ФИО, группа, дата написания РК.
  • Форма с возможностью оставить имя и номер телефона для обратной связи и чекбокс для срочной связи.

Критерии оценки (за невыполнение критерия баллы снимаются полностью или частично)

Общие

• Выполнены главные требования.
• Содержание страницы соответствует заданию.
• Страница выглядит цельно.

Код

• В коде соблюдаются отступы.
• В CSS не используются вложенность селекторов более двух.

HTML

• Правильная структура документа.
• Правильно использованы заголовки разных уровней.
• Использованы семантические теги html5: header, main, footer, nav, section; по необходимости article.
• HTML валиден, нет нарушений вложенности тегов.
• Выбраны правильные форматы изображений.
• Задан правильный язык страницы.
• Ссылки с телефонами, email сделаны корректно.
• Нет лишних оберток div.
• Если нет ссылки в шапке на ваш домен, то работа считается не загруженной на сервер.

CSS

• Корректно подключен и использован шрифт с Google Fonts.
• Использовано не менее двух разных значений для font-weight.
• Использованы пользовательские свойства (custom properties в :root) для цветовой палитры.
• Цвета из палитры применены к тексту, фону, границам.
• Header и footer выделены фоновым цветом.
• Контент страницы имеет ограничение максимальной ширины (1200-1400px) и выровнен по середине (одинаковые поля слева и права).
• Содержимое элементов не переполняет их.
• Стили выдерживаю увеличение или уменьшение количества контента.
• Элементы не наезжают на элементы, следующие за ними.
• Текст и изображения не слипаются друг с другом. Грамотно использованы внутренние и внешние отступы.
• Применено скругление границ.
• Использован box-sizing: border-box;.
• Карточки располагаются в ряд, имеют отступы друг от друга, использован flexbox.
• Изменяется оформление элемента при наведении на него курсора.
• К карточкам с проектами применена анимация, которая срабатывает при наведении.
• Использованы переходы.
• Изменены стандартные стили для элементов формы и чекбокса.
• Изменение состояния курсора при наведении на кнопки (cursor: pointer;).
• Классы названы логично, а не являются набором букв и цифр.

GIT и хостинг

1. Клонировать репозиторий, который был создан Github Classroom (git clone ...).
2. Установить необходимые пакеты для работы над проектом (npm ci).
3. При разработке периодически сохранять результаты в репозиторий git (команды git add, git commit -m "комментарий к версии").
4. Перед завершением работы проверьте валидность вашего кода с помощью валидаторов для html и css.
5. Отформатируйте все документы html, css.
6. После проверки на валидаторе не забудьте отправить ваши изменения на github (git push).
7. Для загрузки на хостинг соберите проект (npm run build).
8. Создайте домен и загрузите в нужную папку с помощью FileZilla файлы из папки build.