Смысл использовать теги main, footer и header?

Александр Васильев, да черт с ними с роботами...
Зато не всё равно людям, использующим читалки.

Как сделать такую grid сетку?

Как сделать такую grid сетку?

Посчитать количество столбцов - 2
Посчитать количество строк - 2
Задать gap.

Тому элементу, который должен занять 2 строки написать grid-row: span 2

Как сделать такую grid сетку?

Это что, grid?

Как отдалить текста от картинки на равные расстояния, если изображения разного размера?

Картинки-то разные, но псевдоэлементы (надеюсь, что у вас там не img в разметке) никто не мешает сделать одинаковыми. Это раз.

Или вы можете прибить их абсолютами (но тоже не очень удобно, если размеры псевдо разные). И задать отступ тексту или родителю.

Или можно использовать гриды. Но придется указать ширину первой ячейки в чем-то более жестком чем min-content/.

Смысл использовать теги main, footer и header?

есть ли какие-то правила, которые говорят использовать эти теги, или плюсы, из-за которых стоит употреблять именные теги секций вместо простых div'ов с такими же классами?

Ага, называется спецификация.
Там написано о том, что тег div используют в том случае, когда нет более подходящего по смыслу.

Смысл использовать теги main, footer и header?

Александр Васильев,

пока на мобильных это не будет жестким правилом - нет смысла

Что?

Что должно быть в современном eCommerce приложении?

Но какими функциями должен обладать современный онлайн-магазин?

Вы ничего не выбирали и не заказывали в онлайн-магазинах?
Серьезно?

Тогда попробуйте и узнаете ответ на свой вопрос.

Как сделать задний фон?

Варианты зависят от адаптива.
Если сайт полностью адаптивен, типа в vw, то соответственно, задали размеры в vw и погнали. Скорректировали, если на каких-то вьюпортах вышло не симпатично.

Если нет.
То из макета нужно экспортировать необрезанную картинку. Т.е. чтобы на больших экранах этот условный "эллипс" как-то логично завершался справа. Сколько влезет.
И позиционируете от центра через calc.

Как поменять всё же цвет в моём случае?

Было бы лучше, если был бы скрин того, что вам нужно. Потому что комбинация с rgba(0, 0, 0, .3) не однозначна.

А то ответ будет дурацким: background-color: #484848 или background: #484848

Вопрос по поводу размещения сайта?

Вопрос: Что делать?

Обычно читать инструкцию хостера и сравнивать то, что там написано с тем, что вы сделали.
Если вы уверены, что сделали всё по инструкции, можно написать в поддержку.

Из вашего вопроса не понятно что вы имеете в виду под "создал сайт" и как и куда вы его загрузили.
Одновременно сообщение про Github и SQL вообще вызывают подозрения о какой-то большой каше.

Почему едет верстка сайта?

Добавьте в header контейнер-центровщик. Или его класс.
Можете погуглить по запросу типа "контент по центру, фон по ширине".

Иииии... много вопросов по вёрстке. Например, почему ссылки в меню у вас сделаны заголовками, а не <a>? Почему иконка телефона контентная? Ну и всё такое по семантике. И валидатор не игнорируйте.

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

Гуглите типа "Проблемы 100vh на мобилках"

Как сделать кастомную пагинацию на плагине swiper js?

serrrezhka, аналог https://webformyself.com/sozdanie-hover-effekta-s-... (второй результат из гугла)

Как можно расположить за границей контейнера логотипы?

Если это фон по всей странице, то задать для body или общего контейнера.
Если только одной секции, то сделать секцию на всю ширину и ей задать фон, а внутри центровщик.
Либо использовать псевдоэлемент и растянуть его на всю ширину окна.

Если нужно, чтобы по краям центральной части были непременно целые части логотипов, то двумя псевдоэлементами и шириной с помощью calc. Типа 50% минус половина ширины контентной части. И запас, если нужно.

Как сделать кастомную пагинацию на плагине swiper js?

Уточните что именно вы делали и что не получилось.
Желательно кодом на codepen.io

Как элегантно сделать блоки одинакового размера при этом чтобы элементы блоков были друг на против друга?

Bjorund ау?

Как автоматически подогнать размер шрифта, чтобы он полностью заполнял контейнер и зависел от высоты контейнера?

Хотя бы как это применить, чтобы вписался во вьюпорт и условно полностью занял его?

Как элегантно сделать блоки одинакового размера при этом чтобы элементы блоков были друг на против друга?

Так кнопки будут разной высоты, а не на одном уровне.

Как добиться нормального отображения теней при наличии скролла?

Как добиться нормального отображения тени?

Задавать высоту обертки больше чем дети, чтобы тень поместилась.

Возможно как-то "приклеить" элементы верстки к картинке?

Реально ли, на любом устройстве сохранять правильное, "приклеенное" положение кружочков на картинке?

Да, реально, для этого придумали проценты.
https://codepen.io/AnnaSummer/pen/QWQOvzy
https://codepen.io/AnnaSummer/pen/eYVeWXR