Сверстайте все блоки сайта по выбранному макету. Вносить правки в дизайн выбранного макета нельзя..
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, вставляйте тексты из макета. Это сэкономит вам время.
Сверстайте все блоки сайта по выбранному макету. Вносить правки в дизайн выбранного макета нельзя.. 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, вставляйте тексты из макета. Это сэкономит вам время.