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

<select>
  <option value="1" selected="selected">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<button>Reset</button>

const $select = document.querySelector('select');

document.querySelector('button').addEventListener('click', () => {
  $select.value = $select.querySelector('option[selected]').value;
});

Верхний инпут перекрывает margin нижнего (email). Просто так это не исправить, тут всё надо переделывать на нормальную вёрстку.

100% на неработающую часть ссылки налезает какой-то другой блок, перекрывающий клик. Другой причины, по которой может не работать обычная ссылка не может быть.

select count(*) from product

Это называется не "вывести товары одним числом", а "получить количество строк в таблице". И по корректной формулировке ответ в поисковике находится за два клика. Как говорится - в правильно сформулированном вопросе уже заложена половина ответа. А программирование - дело точное, и формулировки в нём тоже должны быть точные.

Алгоритм решения этой проблемы прост:

1. Убедиться, что файл существует там, где вы его ожидаете.
   
2. Убедиться, что в файле есть код.
   
3. Убедиться, что у вас в html указан абсолютный, а не относительный путь до файла.
   
4. Убедиться, что по этому пути браузер может получить нужный файл.
   
5. Убедиться, что файл загружается инициализируется до того, как вы пытаетесь работать с его функционалом.
   
6. Если всё вышеперечисленное не помогло, нужно смотреть в консоль браузера на предмет ошибок.
   

https://doka.guide/a11y/
https://inclusive-components.design/

Да всё довольно просто - шаблонизатор просто сохраняет вашу собственную табуляцию.
Возьмём для примера header. В базовом файле у вас перед include идёт отступ в 8 пробелов - он сохраняется. Потом читается файл заголовка, в котором перед <header class="header"> отступа нет, а перед <div class="container"> отступ в виде 4 пробелов есть - он тоже сохраняется. Шаблонизатор просто не добавляет дополнительные отступы, которые были перед директивой @@include ко всем строкам подключаемого шаблона.
Используйте дополнительно какой-нибудь beautify-пакет, если хотите красоты.

Откуда нам знать, что это за атрибут в каком-то рандомном куске какого-то HTML?
Он не стандартный, а взяться мог откуда угодно и означать может тоже всё, что угодно.

Смотрите: есть форма, а есть обработчик формы.
Форму, её HTML, естественно, придётся копировать кучу раз, если не используется никакой шаблонизатор.
Обработчик достаточно реализовать один раз и все формы на него перенаправлять по абсолютному адресу. Что-то типа <form action="/form.php">...</form>.
Судя по тексту вопроса, вы просто в action используете относительный путь, вот оно и не работает.

Куда «экранировать»? Зачем «экранировать»? Вы хотите, чтобы стиль магически применялся только к лежащей рядом с ней кнопке? Так не работает. Используйте классы или идентификаторы, если не хотите инлайново писать. Ну или какой-то сложный селектор. Короче, в стиле должно быть явно указано какую button вы имеете в виду от корня документа.

Градиент в background плюс анимация background-size. Видно же всё прекрасно на сайте:

Стилизованный текст чуть легковеснее, а для SVG надо дополнительно указать alt. Выигрывает текст, но разница микроскопическая.

Чтобы что-то сделать другим цветом в HTML, это что-то должно быть обёрнуто в какой-то тег (в данном случае идеально подойдёт <span>). Затем к этому тегу можно применить соответствующие правила CSS, либо напрямую в атрибут style, либо через отдельную таблицу стилей.
Ну и, разумеется, раз у вас обычный текст заменится на html, то использовать innerText уже будет нельзя.

чтобы данные из devtool сразу вносились бы в файл.scss

Для этого нужно настроить Source Maps и Workspace.

input [type="checkbox"] - "все элементы с type checkbox, лежащие внутри input".
input[type="checkbox"] - "все input с type checkbox".

Лучше всего - ссылку, тогда можно будет поделиться прямым линком на конкретный фильтр.
"Просто div" точно не стоит использовать.

В нормальном мире "кнопка" не должна никуда "вести". Кнопка запускает какой-либо процесс, за переход на другой URL же отвечает ссылка.
Если вы сделаете нормальную семантическую разметку: попадаем под "определённые условия", то рендерим div или выключенную кнопку (тут нужно смотреть по контексту), а не попадаем - обычную ссылку, то всё будет работать без всяких плясок с бубном.

Стандартно средствами браузера - никак.

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