README : ссылки на сайт и номер макета!
Ветка - level -2
Работа отклоняется от проверки
[ ] Пул реквест не отправлен на проверку.
[ ] Одна или более секций отсутствуют.
[ ] Разметка не портирована в JSX.
[ ] Проект не соответствует сгенерированному под него макету.
Работа принимается, если соблюдены критерии работоспособности
[x] Проект адаптирован под различные разрешения экрана. Горизонтальный скролл не возникает на разрешениях от 320 пикселей и больше. Нельзя скрывать полосу прокрутки свойством overflow: hidden. / 11.55
[x] Все блоки из макета свёрстаны. Корректно работает навигация между страницами и ссылки на внешние ресурсы: ни одна ссылка не ведёт в пустоту или на якорь, внешние ссылки открываются в новой вкладке. На все страницы проекта можно попасть, а скрытые блоки можно отобразить. / 11.55
[x] Именование классов по БЭМ. / 11.55
[x] Отзывчивая вёрстка, которая корректно тянется на всех промежуточных разрешениях. / 11.55
[x] В коде используется семантическая разметка: применяются семантические теги, выбор элементов при вёрстке корректен (параграф должен быть параграфом, список — списком); структура DOM-дерева состоит не только из контейнеров div. / 3.38
[x] Для позиционирования элементов выбран верный подход, описанный корректным синтаксисом. Например, при абсолютном позиционировании элемента его родительскому блоку задано относительное позиционирование. / 3.38
[x] Каркас макета реализован на Flex layout или Grid layout. / 3.38
[x] Инфраструктурные файлы проекта созданы через CRA. / 3.38
[ ] Работа модальных окон настроена верно. / 3.38
[x] Разметка портирована в JSX:
[x] разметка заключена в ( ), лишние пустые
для этого не используются, / 3.38
[x] разметка вынесена в соответствующие ей компоненты. / 3.38
В проекте есть:
[x] директория images/ с картинками, / 3.38
[x] директория components/ с JS и CSS-файлами компонентов, / 3.38
[x] директория fonts/ со шрифтами. / 3.38
Хорошие практики
[x] Кнопки, инпуты и ссылки реализованы во всех состояниях, указанных в макете. / 2.14
[x] В макете есть одинаковые элементы. Для их оформления должен быть переиспользован один компонент. / 2.14
[x] Шрифты подключены через @font-face. / 2.14
[x] Иконки экспортированы в формате SVG. / 2.14
[ ] Элементы формы должны выделяться, когда на них установлен фокус. Состояние фокуса, а также outline стилизованы в соответствии с макетом или на своё усмотрение. / 2.14
[x] У формы должны быть заданы плейсхолдеры и валидированы обязательные поля. / 2.14
[x] Reset.css запрещён. / 2.14
Рекомендации
[x] Для каждого шрифта указаны альтернативные варианты из системных шрифтов. / 1.68
[x] Для изображений задан атрибут alt с подходящим значением. / 1.67
[x] Растровые и векторные изображения оптимизированы. / 1.67
Этап 3: верстка и JSX
Бэкенд готов, возьмёмся за фронтенд. Это самый массивный этап — на него у вас есть две недели.
Первым делом следует наладить инфраструктуру. Это универсальное правило: сначала настроить — потом работать.
Перейдите в репозиторий, который подготовили для фронтенда, — movies-explorer-frontend. В нём предстоит работать. Локально создайте ветку этапа и назовите её level-2.
1. Установка CRA
В качестве инфраструктуры проекта используйте пакет CRA, который содержит всё необходимое для работы. Вы уже делали это раньше, поэтому проблем возникнуть не должно.
2. Компоненты и файловая структура
Подготовьте файловую структуру проекта перед тем, как перейти к созданию компонентов. Вот несколько рекомендаций:
для «Реакт-компонентов» создайте отдельную директорию components/;
для вспомогательных функций, а также для запросов к API — директорию utils/;
для изображений — images/;
для кода или файлов сторонних разработчиков, например шрифтов, — vendor/;
После этого перейдите к созданию компонентов на «Реакте». Мы рекомендуем портировать всю вёрстку в JSX. Таким образом часть компонентов окажется презентационной.
Для каждого компонента создавайте отдельную директорию. В ней будут лежать JS и CSS-файлы компонента. Например, для компонента App будет такая структура:
-- components/
---- App/
------ App.js
------ App.css
В CSS-файле содержатся только стили компонента.
Примерный список компонентов, которые вам потребуются:
App — корневой компонент приложения, его создаёт CRA.
Main — компонент страницы «О проекте». Он будет содержать только презентационные компоненты и в будущем, за исключением шапки навигации. Вот так выглядит список компонентов, которые будут использоваться только на этой странице:
Promo — компонент с вёрсткой баннера страницы «О проекте».
NavTab — компонент с навигацией по странице «О проекте».
AboutProject — компонент с описанием дипломного проекта.
Techs — компонент с использованными технологиями.
AboutMe — компонент с информацией о студенте.
Portfolio — компонент со ссылками на другие проекты.
Movies — компонент страницы с поиском по фильмам. В нём пригодятся эти компоненты:
SearchForm — форма поиска, куда пользователь будет вводить запрос. Обратите внимание на фильтр с чекбоксом «Только короткометражки». Для него можно воспользоваться отдельным управляемым компонентом FilterCheckbox.
Preloader — отвечает за работу прелоадера.
MoviesCardList — компонент, который управляет отрисовкой карточек фильмов на страницу и их количеством.
MoviesCard — компонент одной карточки фильма.
SavedMovies — компонент страницы с сохранёнными карточками фильмов. Пригодятся эти компоненты:
MoviesCardList — компонент, который управляет отрисовкой карточек фильмов на страницу и их количеством.
MoviesCard — компонент одной карточки фильма.
Для работы со страницами регистрации, авторизации и редактирования профиля создайте три компонента:
Register — компонент страницы регистрации.
Login — компонент страницы авторизации.
Profile — компонент страницы изменения профиля.
Компоненты, которые понадобятся на каждой из основных страниц:
Header — компонент, который отрисовывает шапку сайта на страницу. Шапка на главной странице, как и на других страницах, должна менять отображение, если пользователь авторизован или не авторизован. Такое поведение нужно сразу предусмотреть в вёрстке, даже несмотря на то, что сама авторизация ещё не реализована.
Navigation — компонент, который отвечает за меню навигации на сайте.
Footer — презентационный компонент, который отрисовывает подвал.
Это базовые компоненты этого этапа. Вы можете создать дополнительные компоненты, например для элементов форм. Кроме этого, мы рекомендуем создать отдельный компонент для вывода ошибок при работе с API — это может быть модальное окно или текстовое сообщение в соответствующих частях проекта.
На следующем этапе у вас появятся новые компоненты или дополнятся существующие, которые отвечают за функциональность:
регистрации,
авторизации,
защищённых роутов.
Вы можете использовать как функциональные компоненты, так и классовые.
3. Роуты
Подготовьте необходимые маршруты:
по роуту / отображается страница «О проекте»;
по роуту /movies отображается страница «Фильмы»;
по роуту /saved-movies отображается страница «Сохранённые фильмы»;
по роуту /profile отображается страница с профилем пользователя;
по роутам /signin и /signup отображаются страницы авторизации и регистрации.
Защищать маршруты авторизацией пока не требуется. Достаточно наладить работу всех ссылок:
нажатие на логотип ведёт на страницу «О проекте»;
нажатие на «Фильмы» — на роут /movies;
нажатие на «Сохранённые фильмы» — на роут /saved-movies;
нажатие на «Регистрация», «Авторизация», «Аккаунт» — на соответствующие роуты /signup, /signin и /profile.
4. Вёрстка
Сверстайте все блоки сайта по выбранному макету. Вносить правки в дизайн выбранного макета нельзя..
HTML:
Разметка портирована в JSX.
Разметка семантическая.
Все классы названы по БЭМ.
Навигация должна работать: ни одна ссылка не ведёт «в никуда».
CSS:
Для стилизации каждого блока выбраны правильные инструменты, которые подходят для задачи.
Вёрстка на Flex layout и/или Grid layout.
Адаптивность под указанные в макете разрешения и отсутствие поломок в промежуточных значениях.
Шрифты подключены через @font-face.
Элементы правильно позиционированы.
Сделана микроанимация кнопок, ссылок и инпутов.
Использован normalize.сss или стилизован строго по БЭМ — без внешних файлов.
Формы и плейсхолдеры стилизованы верно.
В разных частях проекта есть переиспользуемые блоки.
Все изображения оптимизированы — в том числе и .svg.
Отображение элементов интерфейса в разных состояниях возьмите из UI-kit к макету.
Полный список требований находится в критериях к диплому. Обратите внимание, что делать файловую структуру по БЭМ не требуется.
Ещё 4 совета
Вёрстку каждого элемента начинайте с его сложного состояния. Например, верстайте шапку для случая, когда число элементов навигации больше указанного в макете. Потом вы лучше упростите сложный элемент, чем наоборот.
Сразу верстайте критические случаи, но не добавляйте их на страницу. Например, сразу сделайте страницу «без результатов поиска» и интегрируйте в проект прелоадер. Вот его готовый код:
https://code.s3.yandex.net/web-developer/archives/Preloader.zip
Измените цвет прелоадера в соответствии с основными цветами вашего проекта.
Пользуйтесь шрифтами формата woff. Это самый распространённый и поддерживаемый формат веб-шрифтов. В проекте используется шрифт ”Inter“ от дизайнеров «Фигмы». Его можно скачать на официальном сайте во вкладке ”Download“.
Пока у вас нет текстов карточек, полученных из API, вставляйте тексты из макета. Это сэкономит вам время.
Когда всё готово
В README.md обязательно добавьте название макета, который вы выбрали. По этому макету код-ревьюер будет проверять вёрстку на соответствие макету.
Ещё раз напомним, что вносить правки в дизайн макета нельзя. Когда вы отправите проект, выбрать другой макет не получится. Нужно сдавать работу с тем макетом, который вы выбрали и указали при первой отправке на проверку.
Отправьте ссылку на пул реквест, открытый из ветки level-2, в main через интерфейс Практикума. С этого момента и начинается проверка всей вашей работы. Всё как обычно: есть критерии и баллы за них, а также четыре итерации проверки.
Прикладывайте ссылку именно на пул реквест, а не на репозиторий. Как только работа будет зачтена, нажмите кнопку “Merge”, чтобы применить изменения из ветки level-2 в main.
5. Чеклист
Обязательно проверьте работу по чеклисту перед отправкой на проверку..
Критерии оценки дипломной работы: https://code.s3.yandex.net/web-developer/static/new-program/web-diploma-criteria-2.0/checklist_jsx_diplom.pdf
README : ссылки на сайт и номер макета! Ветка - level -2 Работа отклоняется от проверки
Работа принимается, если соблюдены критерии работоспособности
В проекте есть:
Хорошие практики
Рекомендации
Ссылка на требования:
Этап 3: верстка и JSX Бэкенд готов, возьмёмся за фронтенд. Это самый массивный этап — на него у вас есть две недели. Первым делом следует наладить инфраструктуру. Это универсальное правило: сначала настроить — потом работать. Перейдите в репозиторий, который подготовили для фронтенда, — movies-explorer-frontend. В нём предстоит работать. Локально создайте ветку этапа и назовите её level-2. 1. Установка CRA В качестве инфраструктуры проекта используйте пакет CRA, который содержит всё необходимое для работы. Вы уже делали это раньше, поэтому проблем возникнуть не должно. 2. Компоненты и файловая структура Подготовьте файловую структуру проекта перед тем, как перейти к созданию компонентов. Вот несколько рекомендаций: для «Реакт-компонентов» создайте отдельную директорию components/; для вспомогательных функций, а также для запросов к API — директорию utils/; для изображений — images/; для кода или файлов сторонних разработчиков, например шрифтов, — vendor/; После этого перейдите к созданию компонентов на «Реакте». Мы рекомендуем портировать всю вёрстку в JSX. Таким образом часть компонентов окажется презентационной. Для каждого компонента создавайте отдельную директорию. В ней будут лежать JS и CSS-файлы компонента. Например, для компонента App будет такая структура: -- components/
---- App/ ------ App.js ------ App.css В CSS-файле содержатся только стили компонента. Примерный список компонентов, которые вам потребуются: App — корневой компонент приложения, его создаёт CRA. Main — компонент страницы «О проекте». Он будет содержать только презентационные компоненты и в будущем, за исключением шапки навигации. Вот так выглядит список компонентов, которые будут использоваться только на этой странице: Promo — компонент с вёрсткой баннера страницы «О проекте». NavTab — компонент с навигацией по странице «О проекте». AboutProject — компонент с описанием дипломного проекта. Techs — компонент с использованными технологиями. AboutMe — компонент с информацией о студенте. Portfolio — компонент со ссылками на другие проекты. Movies — компонент страницы с поиском по фильмам. В нём пригодятся эти компоненты: SearchForm — форма поиска, куда пользователь будет вводить запрос. Обратите внимание на фильтр с чекбоксом «Только короткометражки». Для него можно воспользоваться отдельным управляемым компонентом FilterCheckbox. Preloader — отвечает за работу прелоадера. MoviesCardList — компонент, который управляет отрисовкой карточек фильмов на страницу и их количеством. MoviesCard — компонент одной карточки фильма. SavedMovies — компонент страницы с сохранёнными карточками фильмов. Пригодятся эти компоненты: MoviesCardList — компонент, который управляет отрисовкой карточек фильмов на страницу и их количеством. MoviesCard — компонент одной карточки фильма. Для работы со страницами регистрации, авторизации и редактирования профиля создайте три компонента: Register — компонент страницы регистрации. Login — компонент страницы авторизации. Profile — компонент страницы изменения профиля. Компоненты, которые понадобятся на каждой из основных страниц: Header — компонент, который отрисовывает шапку сайта на страницу. Шапка на главной странице, как и на других страницах, должна менять отображение, если пользователь авторизован или не авторизован. Такое поведение нужно сразу предусмотреть в вёрстке, даже несмотря на то, что сама авторизация ещё не реализована. Navigation — компонент, который отвечает за меню навигации на сайте. Footer — презентационный компонент, который отрисовывает подвал. Это базовые компоненты этого этапа. Вы можете создать дополнительные компоненты, например для элементов форм. Кроме этого, мы рекомендуем создать отдельный компонент для вывода ошибок при работе с API — это может быть модальное окно или текстовое сообщение в соответствующих частях проекта. На следующем этапе у вас появятся новые компоненты или дополнятся существующие, которые отвечают за функциональность: регистрации, авторизации, защищённых роутов. Вы можете использовать как функциональные компоненты, так и классовые. 3. Роуты Подготовьте необходимые маршруты: по роуту / отображается страница «О проекте»; по роуту /movies отображается страница «Фильмы»; по роуту /saved-movies отображается страница «Сохранённые фильмы»; по роуту /profile отображается страница с профилем пользователя; по роутам /signin и /signup отображаются страницы авторизации и регистрации. Защищать маршруты авторизацией пока не требуется. Достаточно наладить работу всех ссылок: нажатие на логотип ведёт на страницу «О проекте»; нажатие на «Фильмы» — на роут /movies; нажатие на «Сохранённые фильмы» — на роут /saved-movies; нажатие на «Регистрация», «Авторизация», «Аккаунт» — на соответствующие роуты /signup, /signin и /profile. 4. Вёрстка Сверстайте все блоки сайта по выбранному макету. Вносить правки в дизайн выбранного макета нельзя.. HTML: Разметка портирована в JSX. Разметка семантическая. Все классы названы по БЭМ. Навигация должна работать: ни одна ссылка не ведёт «в никуда». CSS: Для стилизации каждого блока выбраны правильные инструменты, которые подходят для задачи. Вёрстка на Flex layout и/или Grid layout. Адаптивность под указанные в макете разрешения и отсутствие поломок в промежуточных значениях. Шрифты подключены через @font-face. Элементы правильно позиционированы. Сделана микроанимация кнопок, ссылок и инпутов. Использован normalize.сss или стилизован строго по БЭМ — без внешних файлов. Формы и плейсхолдеры стилизованы верно. В разных частях проекта есть переиспользуемые блоки. Все изображения оптимизированы — в том числе и .svg. Отображение элементов интерфейса в разных состояниях возьмите из UI-kit к макету. Полный список требований находится в критериях к диплому. Обратите внимание, что делать файловую структуру по БЭМ не требуется. Ещё 4 совета Вёрстку каждого элемента начинайте с его сложного состояния. Например, верстайте шапку для случая, когда число элементов навигации больше указанного в макете. Потом вы лучше упростите сложный элемент, чем наоборот. Сразу верстайте критические случаи, но не добавляйте их на страницу. Например, сразу сделайте страницу «без результатов поиска» и интегрируйте в проект прелоадер. Вот его готовый код: https://code.s3.yandex.net/web-developer/archives/Preloader.zip Измените цвет прелоадера в соответствии с основными цветами вашего проекта. Пользуйтесь шрифтами формата woff. Это самый распространённый и поддерживаемый формат веб-шрифтов. В проекте используется шрифт ”Inter“ от дизайнеров «Фигмы». Его можно скачать на официальном сайте во вкладке ”Download“. Пока у вас нет текстов карточек, полученных из API, вставляйте тексты из макета. Это сэкономит вам время. Когда всё готово В README.md обязательно добавьте название макета, который вы выбрали. По этому макету код-ревьюер будет проверять вёрстку на соответствие макету. Ещё раз напомним, что вносить правки в дизайн макета нельзя. Когда вы отправите проект, выбрать другой макет не получится. Нужно сдавать работу с тем макетом, который вы выбрали и указали при первой отправке на проверку. Отправьте ссылку на пул реквест, открытый из ветки level-2, в main через интерфейс Практикума. С этого момента и начинается проверка всей вашей работы. Всё как обычно: есть критерии и баллы за них, а также четыре итерации проверки. Прикладывайте ссылку именно на пул реквест, а не на репозиторий. Как только работа будет зачтена, нажмите кнопку “Merge”, чтобы применить изменения из ветки level-2 в main. 5. Чеклист Обязательно проверьте работу по чеклисту перед отправкой на проверку.. Критерии оценки дипломной работы: https://code.s3.yandex.net/web-developer/static/new-program/web-diploma-criteria-2.0/checklist_jsx_diplom.pdf