Я здесь накидал скриншотов разных часто встречающихся блоков, нужно будет написать плоскую структуру блока, о которой говорили в видео №2. Примеры именования блоков и элементов. Пример как оформлять привел для картинки №1. Все остальные нужно придумать самим. Всего их 11, если считать первую.
Pic 1
// Pic 1qwe
.info-block {
&__img {}
&__container {}
&__title {}
&__text {}
&__btn {}
}Pic 2
// Pic 2
.news-block {
&__img {}
&__container {}
&__text {}
&__date {}
}Pic 3
// Pic 3
.feature {
&__items {}
&__item {}
&__img {}
&__title {}
&__description {}
}Pic 4
// Pic 4
.container {
&__headline {}
&__separator {}
&__text {}
}Pic 5
// Pic 5
.about {
&__avatar {}
&__summary {}
&__separator {}
&__text {}
&__stats-items {}
&__stats-item {}
&__stats-text {}
}Pic 6
// Pic 6
.overview-block {
&__preview {}
&__button {}
&__title {}
&__text {}
}Pic 7
// Pic 7
.main-menu {
&__items {}
&__item {}
&__cart {}
&__cart-total {}
&__search {}
&__toggle {}
}Pic 8
// Pic 8
.place {
&__name {}
&__address {}
&__phone-number {}
&__rating {}
&__rating-item {}
&__rating-badge {}
&__like {}
}Pic 9
// Pic 9
.subscription {
&__name {}
&__price {}
&__details {}
&__detail {}
&__detail-tick {}
&__detail-text {}
&__order-btn {}
}Pic 10
// Pic 10
.review {
&__count {}
&__rows {}
&__row {}
&__rating {}
&__rating-item {}
&__reviewer {}
&__date {}
&__title {}
&__text {}
}Pic 11
// Pic 11
.product {
&__preview {}
&__breadcrumbs {}
&__breadcrumbs-item {}
&__name {}
&__navigate-btn {}
&__price {}
&__rating {}
&__rating-item {}
&__reviews-link {}
&__description {}
&__details {}
&__quantity {}
&__quantity-btn {}
&__to-cart-btn {}
&__to-favourites-btn {}
&__additional-info {}
&__share {}
&__share-btn {}
&__views {}
}