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

Refguser,

Хотя кмк правильнее "Атрибуты селектора", а не "Селектор атрибута"

У селектора нет атрибутов.
Атрибуты есть у тегов.
И вот селекторы выбирающие элементы по атрибутам так и называются "селекторы по атрибутам" или "селекторы атрибутов". Второе получено более простым переводом attribute selectors.

Первый раз делаю верстку сайта. Как исправить данную ситуацию, так, чтобы "icebeaker_main_block" был справа?

Используйте флексы или гриды для сеток, а не абсолюты.
Пройдите простенькие игры gridgarden и flexbox froggy.

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

Марина, по аналогии:

https://jsfiddle.net/Ankhena/z516pbms/

Как уменьшить javacsript?

Марат Агатов, если вы туда самостоятельно добавляете атрибуты, то логично добавлять нормальные data
C другой стороны, вообще не используете value, почему (риторический вопрос, не отвечайте)?

Как уменьшить javacsript?

Марат Агатов, это дополнение ничего не меняет в том куске кода, который был в вопросе.

Скорее вопрос, как сократить и оставшееся.
Начать можно с объединения листнеров в один.
А эту штуку .from(form.querySelectorAll(':checked'))
Странные невалидные атрибуты заменить на data-атрибуты
Судя по опечатке pice вместо price, это вы их туда засунули, а не modx.

Задать первому input checked?

querySelectorAll('form>div input') например так.
Или form.querySelector('input'), где form из const form

Но лучше бы решать это сразу в html

А это точно разные формы?

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

IvanU7n, только без плюса.
Селектор li+ul в принципе невозможен, потому что они не могут быть соседями.

И ещё какой-нибудь :focus-within приделать.

Как сделать чтобы один или несколько элементов списка ul поменяли свой цвет когда кликнуть на них?

/* note: checkbox pseudo element won't work for FF */

appearance: none; для радио и чекбоксов и всё заработает. Конечно, придется немножко скорректировать стили.

Ошибка 404 на GitHubPages, почему?

Такие проекты удобнее всего публиковать через Github Action. Тогда в репозитории в обычных рабочих ветках находятся исходники, а для публикации будет отдельная ветка, обычно gh-pages.
Посмотрите видео, на его базе всё можно сделать https://www.youtube.com/watch?v=hevU4NdIsoU

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

pshevnin, объедините во фрейм или группу

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

Взять одну целую SVG и не заниматься ерундой.
Вряд ли прописывание поведения для одной займет существенно меньше места и хоть как-то выиграет в производительности. Тем более, что они всё таки разные, а не просто уменьшенные.

Зачем комментарии на сайте оборачивать в тег article?

Вы в другом ответе так и не ответили на вопрос, где же рекомендуют комментарии оборачивать в тег article.

Слушайте, ну прямо в спеке и написано.

Зачем комментарии на сайте оборачивать в тег article?

Алексей Уколов,

"Рабинович по телефону напел".

Рабинович, в данном случае, это whatwg

Как исправить вставку текста в ContentEditable?

А он там не флекс случайно? Тогда, если внутри будут теги, то они станут дочерними элемента флекса с закономерными последствиями.

Блок во всю ширину сайта, 50% занимает картинка, а 50% черный фон, как поверх добавить и сделать по центру блок 1200px?

Антон Вебсайтовский, так и ваш такой же

Как средствами CSS/HTML создать сегмент круга, который можно будет залить внутренней тенью?

Big Wheel, обычно эти альтернативные варианты ищутся лучше, когда известна истинная задача, а не выводы из неё.

Блок во всю ширину сайта, 50% занимает картинка, а 50% черный фон, как поверх добавить и сделать по центру блок 1200px?

Антон Вебсайтовский, Ну и до кучи https://sitist.ru/info-centering-blocks.htm там с примерами

Блок во всю ширину сайта, 50% занимает картинка, а 50% черный фон, как поверх добавить и сделать по центру блок 1200px?

Антон Вебсайтовский,

результат с абсолюты, но есть но, адаптивное же все должно быть, задние блоки должны растягиваться по контенту где текст, то есть без height: 200px;, если убрать, то все выходит за рамки задних блоков.

Ох, беда...
Контентный блок в потоке.
Абсолютом картинка или псевдо с картинкой, если это не конкретный дом, а украшалка.

left: 50%;
margin-left: -650px;

Абсолюты по центру ставятся трансформом -50%. Если ширину 1200 и отступом.
Если несимметричные блоки, то через calc, но тоже через %
Но не отрицательным фиксированным марджином. Иначе какой там адаптив...

Контентный блок нельзя ставить абсолютом. В нём неизвестное количество текста и, соответственно, неизвестная высота.
А украшалку можно. Либо растянуть по высоте либо через пропорции, чего там больше дизайнеру хочется.

Блок во всю ширину сайта, 50% занимает картинка, а 50% черный фон, как поверх добавить и сделать по центру блок 1200px?

Антон Вебсайтовский, Антон, дело в том, что 600 + 1fr это 50% родителя...

И как грид поверх сделать других грид блоков.

Самое простое расположить их в коде в нужном порядке. Если никак, то обычный z-index.
И не грид поверх грида. А всего один грид.
Пройдите уже gridgarden.

а будет ли оно адаптивно

В вашем распоряжении vw, clamp, min, max, гридовый min-max и т.д. Ну и media, если совсем туго.

Блок во всю ширину сайта, 50% занимает картинка, а 50% черный фон, как поверх добавить и сделать по центру блок 1200px?

Антон Вебсайтовский, 1fr 600px 600px 1fr