Как уменьшить 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

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

Простой современный вариант это грид. 4 колонки. Всё.

Альтернативы:
- абсолюты
- calc

В какой программе лучше делать верстку сайта?

Refguser, попробуйте поучить новичка маскам без лайвсервера.
Гиту мы учим студентов практически с первого дня. К тому моменту, когда прояснится с версткой, гит уже будет привычным инструментом без паники и стресса.
Также и Фигма начинается сразу.
Терминал да, первые 2 месяца можно пережить без него.

Зато даже всякие подсказки в ИДЕ

Ну конечно, написал widht и сиди 2 часа втупляй. Вместо того, чтобы увидеть подчеркивание неверного свойства и потратить сэкономленное время действительно на изучение.

Но, возможно, ваш опыт обучения другой и вам и вашим студентам удобно делать это в Notepad++

В какой программе лучше делать верстку сайта?

Refguser,
- Нужно вживить в него Emmet
- Заставить подсвечивать ошибки
- EditorConfig
- Нужно научить его понимать синтаксис SCSS.
- Нужно научить закрывать парные теги
- Хотя бы кавычки ставить обе
- Одновременно изменять открывающий и закрывающий тег
- Переходить по клику на класс из html в css. А он не может, потому что без понятия что является проектом.
- Нет терминала
- Нет встроенного гита (может плагинами...)
- Лайвсервера

И ещё на километр список чего там либо вообще нет либо нужно как-то настраивать и обвешивать плагинами.
Мне надоело писать.
Вряд ли после этог он останется быстрым адекватным редактором.