1) Установка и запуск (React)

yarn
yarn start

Или

npm i
npm start

2) Просмотр

1. Открыть браузер
2. Перейти по ссылке: localhost:3000/ для просмотра главной страницы
3. Перейти по ссылке: localhost:3000/details для просмотра страницы (details)
4. Перейти по ссылке: localhost:3000/history для просмотра страницы (history)
5. Перейти по ссылке: localhost:3000/settings для просмотра страницы (settings)

Правильное использование БЭМ-сущностей

Коментарии к проекту.

В проекте используется шрифт 16px. По международным правилам веб дизайна 16 px - это рекомендуемое минимальное значение для текста на сайте. Это прописано во многих статьях, книгах

https://books.google.ru/books?id=zZ4K3-vdN3oC&pg=PT345&dq=base+size+of+16px+at+96ppi&hl=en&sa=X&redir_esc=y#v=onepage&q=base%20size%20of%2016px%20at%2096ppi&f=false

• По этой причине люди у вас пользуются ctr +/cmd+z.
• По этой причине некоторые размеры (по высоте) в данном проекте могут не соответствовать заявленным

Какие части макета являются одним и тем же блоком?

По данной ссылке представлен список блоков в проекте.

• https://www.figma.com/file/eGHcorGj3DWNY2HCoreFbq/SHRI-first-task?node-id=12%3A295

Какие стили относятся к блокам, а какие к элементам и модификаторам?

1. Для блоков:

• Позиционирование элементов;
• Внешние отступы;
• Внутренние отступы;
• Hазмер шрифта;

2. Для элементов:

• Границы (borders);
• Длинна;

3. Для модификаторов:

• Все цвета;
• Размеры;

Где нужно использовать каскады и почему?

Для локальной области видимости. Например: в данном проекте кнопки имеют разные отступы справа. Имеет смысл в конкретном блоке указать margin-right:8 или 15 px.

Консистентность

Какие видите базовые и семантические константы?

1. Базовые:

• Цвета;
• Округления;
• Анимация;

2. Семантические:

• Отступы;
• Размер шрифта;
• Стиль текста;
• Интерльяж;

Какие видите закономерности в интерфейсе?

• Отступы: 8,12,15px;
• Цвета;
• Позиционирование элементов в flex-direction: column / row

Адаптивность

Где видите вариативность данных и как это обрабатываете?

Какие видите особенности, связанные с размером экрана?

• Особенностей в дизайне не увидел. А так breakpoints установлено на 768px, стандартный брейкпойнт под моб устройства;

Что еще повлияло на вашу вёрстку?

• Все элементы могут переиспользоваться;