Как сделать подобную таблицу?

Alex_87, overflow:hidden для родителя.

Если при этом нужно фиксировать первый столбец и первую строку, то любой из плагинов по запросу "scrolled table"

Как сделать подобную таблицу?

Что именно вызывает сложности?
В прямом виде это обычный table и вперед.

Для адаптации решения могут быть разными в зависимости от макета и требований.

Как скрыть полосу вертикальной прокрутки?

Гуглить "стилизация скроллбаров", можно добавить название вашего препроцессора для упрощения.

И задать ему ширину 0.

Загружаются ли картинки, которые прописаны для других размеров экранов через медиатег?

Выставляете в инструментах разработчика нужный DPR.
Открываете вкладку Network.
Смотрите что загрузилось.
Для удобства можно поставить фильтр, чтобы показывались только картинки.

Семантичен ли такой HTML?

Не может быть семантической разметки в отрыве от макета.
Семантическая верстка это использование тегов в соответствии со смыслом блоков.

Если в main у вас написано, рассмотрим 4 преимущества какого-нибудь пылесоса, а дальше идут 4 красивых блока, то это скорее ul, чем набор section.

Также что-то из этих ваши section может оказаться article'ом.
Мы не знаем, вы не показали макета.

И т.д.

Как расположить один элемент посередине, а другой в конце?

Воващ, Отлично!
А теперь замените текст на кнопке на "А здесь большая-большая кнопка".

Совпадения это хорошо, но нет.

Как расположить один элемент посередине, а другой в конце?

Воващ,

центр легко добивается классическим смешением на 1/2 ширины лого transform: translateX(-50%)

Покажете для вашего варианта?

Как сделать адекватное отображение фоновой картинки?

Barney_Gubmle,

Я хотел бы узнать что считается хорошей практикой

Хорошей практикой является делать так, чтобы на разных устройствах и при разной их ориентации выглядело хорошо.

Как именно, зависит от картинки, её пропорций и пропорций блока в который она вставляется.

Как расположить один элемент посередине, а другой в конце?

Как выровнять один флекс элемент в начало, а другой в центр?

Как расположить один элемент посередине, а другой в конце?

При незаданной ширине header__0 этот вариант бесполезен.
Да и видно, что не центр.

Как выровнять один флекс элемент в начало, а другой в центр?

Как лучше сделать такой блок на css?

WebforSelf, яснее не стало, какой бугор, какой прямоугольник? Я вообще ни одного прямого угла не вижу в этой композиции.
Угол с градиентами острее, чем на макете? Поверните градиент на нужный угол. Я же значения от балды ставила.

Как лучше сделать такой блок на css?

WebforSelf, я, наверное, уже сплю. Что не так с углами?

Как лучше сделать такой блок на css?

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

Либо перестать умничать и взять SVG :)

Как лучше сделать такой блок на css?

WebforSelf, https://jsfiddle.net/0oten8yL/1/
и потом немножко тригонометрии для адаптива :)

Нижний, который в макете красный, можно через псевдо и трансформы сделать.

Как лучше сделать такой блок на css?

WebforSelf, прям так, через запятую прямо к единственному диву.
Так мне что-то неохота это делать...

Как лучше сделать такой блок на css?

WebforSelf, потому что вы перебиваете свойство transform 2 раза вместо того, чтобы задать множественную трансформацию.

Решать это в 4 дива это ужасно.
Еще и контент в чем-то писать придется.

Как правильно накладывать итемы?

tkachenkoaanna097,
margin-left: -12px
всё
без релатива и всего прочего

Если им нужны сдвиги не по 12px, а на разные величины, ну что... придется писать разные.

Как лучше сделать такой блок на css?

WebforSelf, один красный и 3 серых

Как правильно накладывать итемы?

tkachenkoaanna097, отрицательным margin )))
Зачем релативом-то городить?

Как лучше сделать такой блок на css?

Поддерживаю про 4 градиента.