Как записать в span какая кнопка выбрана?

Вам нужен не атрибут, а состояние :checked

Как перезаписать переменную по нажатию кнопки в sass?

Это делается кастомными свойствами css и коротеньким js, а не препроцессорными переменными.
И легко гуглится или ищется по этому ресурсу.

Блочный сайт сверстать с уникальным дизайном, как лучше организовать редактирование текста конечным пользователем?

Ну и ограничение размера сайта в 1600px это мягко говоря не очень, учитывая, что все десктоп экраны в основном fullHD, то есть 1920px

При этом фоны или другие элементы, которые касаются краёв макета должны тянуться на всю ширину браузера, какой бы она ни была.

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

Patris546, есть, конечно.
Так и пишете, else и что нужно для того, чтобы ваш слайдер исчез.

Если речь вдруг про swiper, то имеет смысл прочитать его доку, тогда и этот ваш скрипт не нужен.

Почему перестали работать адаптивы в wordpress?

То есть у меня вот написано h1 - 50px, то h1 - 50px для всех устройств.

А если вы туда напишете относительные единицы или через clamp (min, max)?

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

https://doka.guide/js/match-media/#opredelenie-shi...

Почему появляется горизонтальная прокрутка на мобильном (overflow включен)?

Оверфлоу включен:

Это не поможет.
Во-первых, потому что не работает на мобилках.
Во-вторых, потому что это дурацкий костыль и надо чинить верстку.

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

p.s. зачем текст абсолютом?

Блочный сайт сверстать с уникальным дизайном, как лучше организовать редактирование текста конечным пользователем?

Виталий Першин, да, похоже на то. Но не отдавать же клиентам в таком виде.
Показалась, что лет на 10 назад откатилась или даже ещё больше.

Блочный сайт сверстать с уникальным дизайном, как лучше организовать редактирование текста конечным пользователем?

Елена Бакланова, откройте валидатор хотя бы

Блочный сайт сверстать с уникальным дизайном, как лучше организовать редактирование текста конечным пользователем?

Я его сверстала.

Вот такой сайт: https://zvezda-lady.ru

Он же разваливается, ошибок море, текст картинками.

Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?

0.

Правильно ли с точки зрения семантики БЭМ

Начнем с правды.
В коде нет ни семантики ни БЭМа.

1.

до или после дива со всем контентом?

Хотелось бы конкретный пример о чем вообще речь. Зачем враппер после контента?
Если под словом "после", вы имеете в виду снаружи секция, внутри обертка-центровщик, то именно так.
Удобно создать один класс хелпер для этого.

<section class="block">
  <div class="block__wrapper container">
    <h2 class="block__title"></h2>
    <p class="block__text"></p>
  </div>
</section>>

2. Вчера я вам говорила, что неверно подключены шрифты, три повторения. Всё так и осталось.

3. Про БЭМ.
Если начать как раз с семантики, то и блоки легче выделятся и их элементы тоже.
Секции делать section, хедер header, навигацию nav и т.д.

Сейчас у вас вместо БЭМ просто классы с __

4. nav__wrapper - нет родительского блока с классом nav.
И аналогичные ошибки.

5. Логотип это всегда блок. Его переиспользуют много раз.
И аналогичные ошибки.

6. nav__right - не лучшее название класса. Очень странно будет выглядеть такой блок, когда при адаптиве окажется под левым. Называйте по смыслу и назначению.
Если нормального названия не придумывается, то очень может быть, что эта обертка вообще лишняя. Сейчас именно так.

7. Очень много лишних оберток.
background__enjoy - задавайте фон секции.
Enjoy Your Morning Coffee. - этому достаточно одно тега h2. Вместо по крайней мере трёх div.
и аналогичные проблемы.

8. Ни поиск ни другие иконки не являются контентными изображениями, их можно смело убрать в стили. Вместо этого написать текст и доступно скрыть его. Гуглите visually-hidden.

9. <span class="number__card">01</span>
меняется на псевдоэлементы и ol (или ul, если в действительности порядок не важен)

Ещё почему-то меню у вас нумерованный список вместо маркированного. В нём что, поменяется смысл от перемены порядка?

Звезды в 5 тегов img это дичь.
-----

Хватит пока

Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?

SQLpodavan228,

box sizing border box у меня подключен прямо к HTML

Что?
Это очень интересная фраза.
Но в предоставленном коде этого свойства нет вообще.
Впрочем, как и паддингов или марджинов у указанного блока, от которых у вас проблемы.

Но по скринам именно так и выходит: мин ширина 550 part-right__wrapper + два отступа по 56 родительскому блоку. Итого родительский блок (т.е. ваш проблемный part__right) как раз и выходит 662.

ссылка на него почему то не скидывается

Достаточно знаний, что он должен быть 550.

Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?

По вашему коду ширина part__right выходит 550px.
Поэтому, нужно сделать песочницу с видимой проблемой на codepen.io или аналоги.

Также порекомендую ознакомится со свойством box-sizing.

p.s.
Зачем вы 3 раза подключаете шрифты? Одного раза вполне достаточно.

Как отключить MSO в PHPStorm?

Andrew E, у меня в шторме всегда работало и работает обычный dn + tab.
И в любом случае всё эти сокращения точно можно изменить в настройках.

Что за странная логика, выводить первым то, что вообще использует хз кто

Сейчас туда завезли много AI дополнений кода, может быть эти mso и уедут ниже.
Но логика-то проста. Показывать сначала наиболее релевантные поиску результаты, а это всё таки две буквы вместе, а не наличие одной из них в свойстве, а другой в значении.

Но у меня и так первой строчкой показывает нужный вариант, как раз тот, который хочется.


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

Как отключить MSO в PHPStorm?

Кажется, подсказки будут нормально работать, если вы будете нормально набирать буквы. Т.е. желая получить display: none, нужно набирать dis или типа того, а не аббревиатуры из эммента.
Если используете эммет, так и нажимайте таб после dn.

Почему JS не видит SVG-элементы по ID?

Если не обращать внимания на то, что у вас даже svg выложена криво, потерян по меньшей мере закрывающий тег и на неверные значения атрибутов id во всех остальных случаях кроме svg_elem, то всё остальное должно работать.

Поэтому выкладывайте неполучившееся в песочницу на codepen.io

id="Ellipse 3"

Обратите внимание на то, что в id не может быть пробелов.

Как на html реализовать блоки "Внимание / Важно"?

Вася Пупкин, из онлайн не знаю, думаю, что с функциональностью которая нужна вам для этой плашки (разные бордеры, скругления, тени) - вряд ли.
Скорее всего поможет что-то типа Dreamweaver.

Если не разбираетесь в верстке, то проще и быстрее попросить на фрилансе.

Если блок с такими стилями повторяется, то их можно вынести всё таки в CSS файл, а в редакторе сделать его применение, по аналогии как для стилей заголовков. Чтобы мог добавить кто угодно.

<section style="padding: 1em; border-left: 4px solid #d9a83a ; border-radius: 8px; background:rgb(252,246,230); color: #49390d; box-shadow:  0 2px 0 #efefef">
  <h2 style="margin-top: 0; text-transform:uppercase;">⚠ Предупреждение</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet natus laborum eveniet? Unde nesciunt, architecto error iste accusamus veritatis? Fuga!</p>
</section>

Как на html реализовать блоки "Внимание / Важно"?

без отдельного css файла

Что мешает заинлайнить стили?

Как подобрать размер шрифта для баннеров?

1. Найдите баннер похожего размера, подойдите к нему на метр и посмотрите как оно.
2. На любой бумажке распечатайте заголовок выбранного вами размера. Найдите дома подходящую стенку, прикрепите к ней бумажку. Отойдите на метр.

Если я буду использовать 100px

У баннеров проблемы с пикселями.

Adobe Photoshop

Лучше б векторный редактор выбрать.

Как сделать border со смещением?

Ещё более симпатичная конструкция, если иконки разные

:root {
--icon-name: url("data:image/svg+xml,%3Csvg width='980' height='980' viewBox='0 0 980 980' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='490' cy='490' r='490' fill='black'/%3E%3C/svg%3E%0A");

--icon-name2: url("data:image/svg+xml,%3Csvg width='200' height='100' viewBox='0 0 200 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H200V100H0V0Z' fill='%23FF6392'/%3E%3C/svg%3E%0A");;
}

.block {
  &::before {
    // разное нужное
    mask: var(--icon) no-repeat center;
    bg: red;
  }
}

.block--mod1 {
  --icon: var(--icon-name);
}

.block--mod2 {
  --icon: var(--icon-name2);
}