Что удалить в html файле, чтобы он открывался браузером?

Удалил почти все тэги script и их содержимое из head - всё ок

Как скачать картинку с сайта, чтобы она не была корявой?

Волшебный шар по пятницам не работает.
Откуда качать?

Как поставить приставку _active сразу нескольким классам элементов при скролле до определенного блока?

Freeman0205, если добавить transition: filter 0.5s linear на #bg из демки выше, то будет плавный переход.

Как анимировать свг?

@keyframes

Правильная семанитческая разметка для лендинга?

Опираясь лишь на абстрактный пример, который Вы дали, можно лишь предположительно сказать что:
Да, стоит обернуть всё в main, а header у которого h1 - вынести вне main, и footer соответственно после main.
Скорее всего пихать в каждую секцию header Вам не надо.
Скорее всего, Вы используете aside не правильно. Уж слишком их много.

Как поставить приставку _active сразу нескольким классам элементов при скролле до определенного блока?

Freeman0205, Да, так, как Вы сказали один из вариантов. Но так получается нужно две картинки.
А можно так:
Нажимайте на кнопку "filter"

Как поставить приставку _active сразу нескольким классам элементов при скролле до определенного блока?

Freeman0205, А по точнее? У Вас на фоне картинка и Вы хотите сделать её чёрно белой при начале анимации? На фоне всего блока? Именно через background-image вставлена?
Прикрепите скрин как это выглядит.

Как поставить приставку _active сразу нескольким классам элементов при скролле до определенного блока?

Freeman0205, Так, ну Вы же все эти координаты описали в css, то есть для каждой картинки этот модификатор применит разную анимацию.
Ну вроде всё верно я Вам сказал)

Как поставить приставку _active сразу нескольким классам элементов при скролле до определенного блока?

Freeman0205,

у которых отличаются параметры, а не класс,

Что Вы имели в виду?

Как поставить приставку _active сразу нескольким классам элементов при скролле до определенного блока?

Freeman0205, Да и вообще чёт по-моему я с Вами запутался, или не так понял :-)
Но так как у Вас на скриншоте вроде тоже должно быть ок

Как поставить приставку _active сразу нескольким классам элементов при скролле до определенного блока?

Freeman0205, Обновил предыдущий комментарий, не совсем корректно был scss написан, чтоб работало как задумывалось.

Как поставить приставку _active сразу нескольким классам элементов при скролле до определенного блока?

Freeman0205, обращайтесь ;-)

Как анимировать блок?

Чтобы просто мигали всё время?
@keyframes

Как поставить приставку _active сразу нескольким классам элементов при скролле до определенного блока?

Freeman0205, а, да, ну тут несколько вариантов, но самый простой если вы поменяете свой scss чтобы вложенный в картинки селектор был такой:

&-img{
// styles
  &.problem_with-animation{} // То есть не модификатор как приставка, а отдельный модификатор-анимация (можно хоть просто active)
}

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

Другие варианты более замороченные и нужно будет много чего поменять.

Как поставить приставку _active сразу нескольким классам элементов при скролле до определенного блока?

Freeman0205, Увидел Ваш новый скрин. Судя по стилями Вы хотите анимировать только картинки. Тогда можете не добавлять новый класс, а поменять селектор на такой:
document.querySelectorAll('img[class^="problem"]')

Как поставить приставку _active сразу нескольким классам элементов при скролле до определенного блока?

Freeman0205, критично, его тоже найдёт, но мне же этого не видно, т.к. Вы скинули обрезанный скриншот :-)
Можете всем элементам, которые хотите анимировать, добавить отдельный класс, скажем 'problems_animation' и тогда искать по нему в querySelectorAll

Как поставить приставку _active сразу нескольким классам элементов при скролле до определенного блока?

Так же правила, раздел 3.8

Как поставить приставку _active сразу нескольким классам элементов при скролле до определенного блока?

Freeman0205, Смотрите, находите в DOM все элементы, которые хотите анимировать и помещаете их в переменную.
Как я понял, Вы хотите анимировать дивы с картинками? Или сами картинки? Не столь важно на самом деле, но Вам нужно это точно для себя определить.
Таким образом, если хотите анимировать все дивы с class="problem-...",
то делаете в начале кода такую переменную:

const elemnsToAnimate = document.querySelectorAll('div[class^="problem"]') // найдёт все дивы, у который атрибут class начинается на problem.

И дальше в том месте, где Вам нужно навесить всем этим элментам класс - выполняете код, что я привёл выше. Так как сейчас мы выбрали другое название переменной, в которой они хранятся, чтобы не конфликтовать с Вашей переменной, то код будет выглядеть так:

elemnsToAnimate.forEach(function(item){item.classList.add('_active')}) // Вы правильно сказали - перебираются все элементы, которым мы хотим добавить класс и каждому добавляется класс _active

А вот куда этот перебор вставить - Вам виднее. Когда Вы хотите их заанимировать, туда и вставляйте.

Как форматировать код с помощью линтера в VueJS проекте?

https://eslint.org/
https://eslint.vuejs.org/
https://prettier.io/
https://tproger.ru/translations/setting-up-eslint-...
https://maxpfrontend.ru/vebinary/nastroyka-eslint-...

Как сделать одинаковый отступ?

Разделить на 2 списка и не вырывать лого из потока?