Skip to content

Latest commit

 

History

History
167 lines (126 loc) · 14.9 KB

portfolio.md

File metadata and controls

167 lines (126 loc) · 14.9 KB
Raw

portfolio

Описание проекта

Portfolio – задание stage#0 в ходе выполнения которого вы сверстаете landing page портфолио фотографа, сделаете его адаптивным и интерактивным.

Ключевые навыки:

  • валидная семантическая адаптивная вёрстка
  • легкоподдерживаемый читаемый код
  • экспорт стилей и графики из Figma
  • использование JavaScript для реализации указанного в задании функционала

Этапы работы над проектом:

Задание состоит из трёх частей:

  • Часть 1. Фиксированная вёрстка
    • Требования и критерии оценки
    • Советы по выполнению
    • в этой части задания необходимо сверстать страницу по макету, которая корректно отображается при ширине экрана не меньше 1440рх
    • проверяется валидность и семантичность вёрстки, её совпадение с макетом
    • примерное время выполнения - 20 часов
  • Часть 2. Адаптивная вёрстка
    • Требования и критерии оценки
    • Советы по выполнению
    • в этой части задания необходимо добавить адаптивность свёрстанной странице. При ширине страницы 768рх ставится задача совпадения вёрстки с макетом, на остальных разрешениях до 320рх включительно достаточно обеспечить отсутствие горизонтальной полосы прокрутки.
      Также на этом этапе в вёрстку добавляется адаптивное меню, для создания которого используется js.
    • проверяется совпадения вёрстки с макетом при ширине страницы 768рх, отсутствие горизонтальной полосы прокрутки, работа адаптивного меню
    • примерное время выполнения - 15 часов
  • Часть 3. Добавление функционала
    • Требования и критерии оценки
    • Советы по выполнению
    • в этой части задания используем JavaScript для добавления странице интерактивности:
      • смена изображений в секции portfolio
      • перевод страницы на два языка
      • возможность переключения светлой и тёмной темы
    • проверяется реализованный функционал
    • примерное время выполнения - 15 часов

Продолжительность выполнения первой части задания - 2 недели
Продолжительность выполнения второй и третьей части - 1 неделя
Форма проверки каждой части задания - кросс-чек

screenshot

Макет в figma

Создание собственной копии макета

Выполнение задания начните с создания собственной копии макета. Для этого

  • авторизуемся в figma
  • открываем макет
  • на панели вверху нажимаем на стрелку рядом с названием макета, выбираем пункт "Duplicate to your drafts"
  • слева вверху открываем настройки, выбираем "Back to files"
  • открываем копию макета рядом с которой есть надпись "In Drafts"

Структура макета:

  • Макет состоит из трёх блоков: <header>, <main>, <footer>
  • Блок <main> состоит из шести секций <section>:
    • hero
    • skills
    • portfolio
    • video
    • price
    • contacts

Рекомендации по вёрстке отдельных блоков

  • Для <header> не используйте позиционирование fixed и sticky, так как это затруднит проверку макета, старайтесь не использовать позиционирование absolute
  • Изображение секции hero не нужно растягивать по размеру экрана, это затруднит проверку макета
  • Фоновый цвет макета черный #000, тянется на всю ширину страницы
  • В секции video на этапе вёрстки достаточно сверстать изображение и кнопку, если будет желание, работающее видео с панелью управления можно будет добавить при выполнении одного из проектов на выбор серии js30

Рекомендации по качеству кода

Рекомендации предлагаются для ознакомления, их строгое соблюдение на этапе stage#0 - stage#1 не предполагается и не проверяется

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

  1. вёрстка валидная, семантическая, соответствующая макету
  2. приложение корректно отображается и работает в браузере Google Chrome последней версии
  3. запрещается использование CSS-фреймворков (bootstrap)
  4. допускается использование CSS-препроцессоров (Sass), normalize.css
  5. не рекомендуется использовать сброс стилей при помощи reset.css
  6. запрещено добавление вёрстки картинкой, когда делается скрин части макета и вставляется в вёрстку. Для вёрстки используйте теги и символы, картинками можно добавлять изображения и иконки, а не элементы вёрстки (кнопки, блоки, секции)

Требования к репозиторию

  • задание выполняется в приватном репозитории школы. Как работать с приватным репозиторием школы
  • если у вас не создаётся приватный репозиторий школы, задание можно выполнять в личном приватном репозитории
  • от ветки main создайте ветку portfolio в ней создайте папку portfolio, в ней разместите файлы проекта
  • для деплоя используйте gh-pages Как сделать деплой задания из приватного репозитория школы
  • если не можете для деплоя использовать gh-pages, используйте https://app.netlify.com/drop. Название страницы дайте по схеме: имя гитхаб аккаунта - название таска
  • так как задача делится на три части portfolio будет иметь три версии:
    1. ветка portfolio будет содержать первую часть задания, приступая ко второй части создайте ветку portfolio-part2 от ветки portfolio что позволит продолжить с того же места, на котором вы остановились в первой части
    2. по завершении выполнения второй части задания создайте Pull Request из ветки portfolio-part2 в ветку portfolio, проверьте на конфликты и сделайте Merge
    3. для третьей части выполнить первые 2 пункта еще раз но с другим названием ветки (portfolio-part3)

Требования к коммитам

Требования к Pull Request

Чтобы получить баллы за задание необходимо:

  • Выполнить задание *
  • Засабмитить задание т.е. отправить его на проверку **
  • Если задание проверяется в ходе кросс-чека, проверить все присланные на проверку работы и засабмитить результаты проверки до дедлайна кросс-чека ***

* *Весь код проекта вам необходимо написать самостоятельно, только так можно чему-то научиться.
Копирование чужого кода (Ctrl + C, Ctrl + V) на курсе запрещено.
** Засабмитить задание можно только до дедлайна таска, после дедлайна сабмит недоступен
*** Сабмит результатов кросс-чек проверки доступен и после дедлайна кросс-чека, но на оценки проверяющего и проверяемых не влияет

Как сабмитить задание

После выдачи таска, но до наступления дедлайна зайдите в rs app https://app.rs.school/, выберите Cross-Check: Submit, в выпадающем списке выберите таск, в названии которого есть слово portfolio, в поле Solution URL добавьте ссылку на задеплоенную версию созданного вами сайта, нажмите кнопку Submit.

Рекомендации по сабмиту

  • Засабмитить задание рекомендуется как можно раньше, как только в rs app появится такая возможность. После сабмита задание можно продолжать выполнять до самого дедлайна
  • Так как проект выполняется в приватном репозитории, сабмитить ссылку на репозиторий или pull request нет смысла - проверяющий его не увидит. Приватный репозиторий школы видите только вы сами, админы курса, и увидят ваши менторы, когда они появятся
  • Убедитесь, что задеплоенная вами ссылка открывается в режиме инкогнито браузера
  • Сделайте скриншот засабмиченной ссылки и сохраняйте его у себя до старта кросс-чека. Если вам не придут работы на проверку, скриншот послужит доказательством, что вы вовремя засабмитили ссылку на работу. В таком случае вашу работу проверят в ходе апелляции

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

Материалы

Вебинары RS School