saintriko / frontend_course Goto Github PK

https://github.com/RikoRastaman/FrontEnd_course/blob/510aa1d51f26ef0cac5b8059050dfe298d90f673/coffee/src/index.html#L163-L176

• Привести блок к БЭМ виду.

• Собрать проект используя readme.me
• Разбить файл с css на блоки scss. Как в примере src/scss/blocks
• Поменять пути в src/index.html на пути с dist/ в начале
• Отписать Паше о готовности

Все изменения нужно вносить внутри папки src. В папке dist лежат собранные файлы в репозиторий их добавлять не надо.

В файле src/index.html пути должны идти относительно папке dist. src/index.html при сборке будет скопирована в корень с тем же названием index.html

• Сверстать footer по БЭМ

• Реализовать адаптивность сайта до width=320px
• Прочитать про медиа запросы здесь
• Добавить мета тег viewport

Примеры адаптивных сайтов:
https://godesign.school/
https://ux-journal.ru/
https://www.ispring.ru/

• Сверстать "ПРОБУЙТЕ НОВЫЙ ВКУС КАЖДЫЙ МЕСЯЦ"

• Сверстать "Как работает подписка" как в дизайне

https://github.com/RikoRastaman/FrontEnd_course/blob/510aa1d51f26ef0cac5b8059050dfe298d90f673/coffee/src/index.html#L111-L142

• Привести названия классов к БЭМ нотации;

• Сверстать header по БЭМ

• Использовать одинаковый layout во всех блоках типа "card"
• Реализовать отдельным элементом картинки по краям
• Написать модификаторы для card__title, card__desc
• Позиционирование карточки задавать классом внутри блока, которого она находится

• Переделать блоки, которые встречаются более 1 раза на бэм нотацию. Почитать здесь.
• Доверстать футер
• Разбить вёрстку на секции используя тег <section>
• Всем картинкам проставить атрибут alt=""
• Использовать для футера и хедера соотвествующие теги <header></header> & <footer></footer>

Про HTML5 теги можно посмотреть здесь