Как проверить на наличии флажка :checked у input, после перезагрузки страницы?

Такая же как и при первой загрузке?

Но может у вас всё таки обратная цель: поставить/снять галку используя инфу из LocalStorage.

Как сверстать подобное?

Инструмент с пунктирами поставить фоном.
Иконки псевдоэлементами.
Сами блоки абсолютами или гридами.
Позиционирование считать от центра по принципу left calc(50% - сколько-то там), с правыми аналогично right.

Тут баловалась https://codepen.io/AnnaSummer/pen/QWQOvzy

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

Это либо просто фон либо фон псевдоэлемента.
Вы можете поставить его на место с помощью position, transform, background-position и calc.
Например, по схеме: left calc(50% - половина-ширины-контейнера) и трансформ на 30% самого псевдо.

Как сделать псевдоэлемент для такой интересной картинки?

Можно ли обойтись без загрузки другой картинки по темнее?

Зачем она вам вообще?

Как сделать слайдер в 100% размер мобильного экрана?

Ограничить высоту слайдера.
Сделать слайд гридом.
Для фото оставить 1fr, т.е. сколько останется.
Для фото задать object-fit.

Либо уточнить как оно всё должно себя вести по-вашему.

Как исправить изчезнавение кнопки?

Для изменения вида кнопки скрипт не нужен вообще.
Вместо всего вашего скрипта:

.btn:hover {
  background: #3b3b3b;
}

.dropdown-content:hover .sub-dropdown {
  display: block;
}

Позиционирование поправьте.

Только не забудьте учесть, что на мобилке ховера нет, есть клик.

Если решите обрабатывать клик на JS, то заметно удобнее манипулировать классами, чем напрямую стилями из CSS.

Почему не работают стрелки слайдера?

Артем Рассадин, видимо, не хватает модулей для навигации.

import Swiper from "swiper";
import { Navigation } from 'swiper';

new Swiper(".swiper", {
  slidesPerView: 1,
  modules: [ Navigation ],
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
   // If we need pagination
   pagination: {
    el: '.swiper-pagination',
  },
});

Почему не работают стрелки слайдера?

new Swiper(".mySwiper",
и где же блок mySwiper?

Как работает flex-grow?

fleshik, наличие текста в блоке изменяет свободное пространство в родителе. Соответственно, изменяется "прибавка" к блокам.
Что у вас в песочнице не смотрела, впн включать лень.

Представьте, что есть блок 500px. У него два пустых дочерних и у каждого flex-grow по 1. Блоки будут по 250px.
Если в один из них добавить слово занимающее 100px, то свободного пространства в родителе останется на 400px. Разделим его пропорционально заданным flex-grow, раз они по 1, то просто пополам.
Итого, первый блок (который с текстом) окажется 300px, второй 200.

В чем смысл БЭМ блока, если нужны служебные блоки?

htmlclassic, он в любом случае блок.
Почему уникальный я не знаю, блоки как раз таки очень даже переиспользуемые.

В чем смысл БЭМ блока, если нужны служебные блоки?

htmlclassic, если не задаете и никогда не будете, то можно не писать.

Почему не отображаются стрелки в slider swiper?

У них высота нулевая.
Вы им хоть какие-то стили задайте, они и появятся.

Как изменять value в поле input динамически?

Валентин Попов, да и ладно. Это из разряда шашечки или ехать. В value нормальное актуально значение.

Если вам прямо зачем-то нужно чтобы менялось в атрибуте, то используйте setAttribute.

В чем смысл БЭМ блока, если нужны служебные блоки?

htmlclassic, блоки в БЭМ не должны ничего знать о своей внешней геометрии. Значит, если в неё есть необходимость, то это нужно делать в классе элемента.

Если вы хотите использовать только БЭМоподобный нейминг, то тогда вообще без разницы.

Как разместить с помощью гридов данный блок?

Yaroslav723,

какая проблема в коде где именно?

В арифметике.
160х2 не будет равно 280.
А вы пишете 2fr 1fr. Ну точнее не вы, а тот кто вам подсказал это в ответе.

Если блок неадаптивный, то можете задать по min-content.
Если адаптивный, то задать оберткам картинок aspect-ratio, если позволяет ТЗ или использовать хак с паддингами для пропорций (легко гуглится). А картинкам ширину и высоту по 100% и подходящий object-fit.

Потом определиться откуда взялся 1em в gap и задать нормально (в зависимости от необходимого поведения при адаптиве)

Как разместить 2 фона и сделать адаптиность?

SeriousAnonymous, что-то вы в svg мужика подрастянули слегка.

Сейчас имеет такой вид с 2 объединенными картинками.

И хорошо. На больших экранах скорее 100%, чем cover.
А на маленьких без указания size, но с заданным bg position, чтобы была чуть задвинута за правый край и обрезалась по левому.

Как разместить 2 фона и сделать адаптиность?

SeriousAnonymous, png или jpg можно залить сюда и скопировать путь. Можно на гитхаб или бесплатный/временно бесплатный хостинг или в какой-нибудь сервис, дающий нормальную ссылку. Можно взять похожую картинку из яндекс.картинок.

Как разместить 2 фона и сделать адаптиность?

Изменяйте поведение фонов с помощью @media.

Сделайте песочницу на codepen.io или аналоге с видимой проблемой.

Фон должен быть размеров 1920px

А на экранах больше чем 1920 что должно быть?
У вас там картинка с мужиком 1157. Если вы её растянете на 1920... будет ну такое себе. А если ещё и ретина, то совсем.
Вторую картинку хорошо бы получить в формате SVG.

Есть вариант попроще: взять и засунуть мужика в внутрь svg и будет одна картинка. А потом уже её позиционировать.

В чем смысл БЭМ блока, если нужны служебные блоки?

htmlclassic, у (4) будет два класса (или по крайней мере два, если вдруг еще будут модификаторы).
Первый - класс элемента от родительского блока.
И второй - класс блока.
В БЭМ это называется микс. Почитайте в спеке.

А (5) вообще лишний. Вместо него можно сразу форму писать.
И у этой формы тоже будет аналогичный микс из классов. Потому что она элемент попапа (или contact-information) и при этом тоже самостоятельный блок.

Как работает flex-grow?

flex-grow делит свободное пространство в родителе между дочерними элементами в указанных пропорциях.

Если вам нужны блоки одинаковой ширины, так и задайте им одинаковую ширину.