dom1n1k

Сделать разные классы типа .rate__title, .goods__title, .review__title - нормально. Если у них есть общие свойства, их можно вытащить в миксин, оставив классы независимыми. Уверен, что у них будет что-то общее, но найдутся и различия. То есть совпадение не будет на 100%.

Впрочем, вариант с миксованием универсального "заголовочного" блока тоже вполне норм (если они действительно одинаковые). Я как-то делал класс .heading с модификаторами вида .heading--1, .heading--2 и пр. Потому что как это ни дико звучит - визуальный уровень заголовка не всегда совпадает с его семантическим уровнем.

750 - это айфон 6-8 что ли?
У них ширина 750 с учетом ретины, а в css-пикселях - 375.

Ну только цельной картинкой, подложенной в фон. Работать будет, но:
а) будет дофига весить
б) нужно думать, как её лучше размножать или тянуть, если будет очень широкий монитор или очень длинная страница.

В целом дизайн - полное г**но (не только из-за этого фона).

Зачем эти полоски верстать? Чтобы что?
Делать их частью картинки, текст поверх, да и всё.
Как вариант, сделать бутерброд из 2 равновеликих картинок - квадрокоптер и все полоски.
Это тот самый случай, когда мудрить нет смысла.

Иконки - крайне желательно.

С фотографиями вопрос спорный, поскольку уже давно неактуальна практика подгонять размер картинки пиксель-в-пиксель под её место на сайте. Когда-то в незапамятные так делали и тому был ряд причин:
- популярность фиксированной и "полуфиксированной" верстки;
- очень строгая экономия трафика;
- некачественные алгоритмы масштабирования в браузерах.
Сейчас должно тянуться (почти) всё и всегда, поэтому зачастую фотографии просто берутся несколько больше, чем нужно (в разумных пределах, конечно), чтобы запас по разрешению покрывал растяжение на большие экраны и ретину.

Но вообще, если заморочиться и через srcset/picture сделать 2-3 версии картинок разного размера - это будет хорошо. Но гемору больше. И выбирать размеры нужно вдумчиво, а то иногда можно получить обратный эффект - траф будет не экономиться, а тратиться наоборот больше.

Говносайт можно. Нормальный нельзя.
Но тут есть очень важный нюанс: в понимании многих веб-разработчиков "сетка" - это какие-то равные колонки а-ля бутстрап или что-то наподобии. Но сетки могут быть очень разные, с самым разным количеством колонок, с различными ширинами колонок и так далее.

Там ключевой момент не во флексе, а в свойстве object-fit. Потому что идеально подобрать и упаковать разноформатные фото всё равно невозможно - по любому придётся их подрезать.

Не считая отбивки пустыми строками, конец блока не обозначаю никогда, начало - почти никогда. В отличие от JS, где очень часто полезно написать что и как делает функция, в НTML смысл блока, как правило, и так ясен из его класса и/или идентификатора. Достаточно комментировать только какие-то тонкие моменты. В CSS аналогично - комментировать целый блок редко когда нужно, только отдельные правила (зачем оно, откуда взялось значение и тд).

https://mydevice.io/devices/

Класс нужно задавать таким параграфам. Это единственно правильное решение. Всё стальное либо не сработает, либо будет оверкил.

Все блоки одновременно являются детьми некого вышестоящего контейнера. Отступы нужно указывать для классов, соответствующих элементам родительского блока. Далее эти классы могут быть прикручены либо непосредственно к обсуждаемым блокам, либо к промежуточным дивам-оберткам.

Недавно отвечал на похожий вопрос:
https://toster.ru/answer?answer_id=1080988#answers...