Danny Arty

#result{
    font-size: 30px;
    color: #fff;
    border: 1px #000;
    border-radius: 10px;    
    background-color: #ff715b;
    border-style: none;   
}
#result:not(:empty) {
    padding: 10px;
    box-shadow: 5px 5px 5px #e4887a;
}

1) Подробнее тут
Там написано, что

A DOCTYPE must consist of the following components, in this order: string that is an ASCII case-insensitive match for the string !DOCTYPE"...

, то бишь без учета регистра

2) Во-первых, en, а не eng. Во-вторых, имхо глупо объявлять основной язык страницы английским, когда на деле весь контент, условно, на русском. Почитайте для чего его(язык) указывают и поймете, что так, как в вашем вопросе, делают только "опытные" разработчики.

3) Браузер загружает HTML постепенно и, если он видит тег script, то он должен выполнить его и только после этого загружать контент, находящийся после. Чтобы частично избежать задержки показа контента, скрипты помещают в конец страницы. Заметьте, это только частично решает проблему, если скриптов не много и они не тяжеловесные. Далее советую почитать про атрибуты async и defer и разницу между ними.

4) По стандарту HTML5 одиночные теги закрывать не нужно, это спецификация XHTML. Но валидатор на это ругаться не будет, так что тут уж как душе хочется.

document.getElementById('loader').animate({width: '100%'}, 500);

Hidden-инпуты для защиты от спама - это фигня. Больше половины ботов раскусят.
Я на многих сайтах ставлю довольно простую защиту, которая отлично работает.
Добавь в форму какой-нибудь текстовый инпут и скрой его стилями, но НЕ ЮЗАЙ display: none;, visibility:hidden;, opacity:0;, так как многие боты и это раскусят.

Например input с name="copyemail":

<form action="">
	<input type="text" name="copyemail" placeholder="Email для копии">
	<input type="text" name="name" placeholder="Имя">
	<input type="email" name="email">
	<button type="submit">Отправить</button>
</form>

и стили для него:

input[name="copyemail"] {
    display: block;
    width: 2px;
    height: 2px;
    margin-bottom: -2px;
    border: none;
    padding: 0;
    opacity: 0.01;
}

И дальше уже на сервере проверяешь:

if ($_POST['copyemail']) {    
    //Это спам! Делаем вид, что сообщение отправлено.
    die('Ваше сообщение отправлено');
} else {
     //Все норм. Метро Люблино, работаем
}

У вас у li задано width: 150px;

nav ul ul li {
width: auto; 
}

Имхо Nunjucks, ну или Slim

Если у вас эти кнопки расположены внутри tab-а, значит они должны быть внутри каждого.
А скрипт будет такой:

$('.btn__arrow__stroke').click(function() {
    
    let tabsContent = $(this).closest('.tab_content.active');
    let tabsToggler = $(this).closest('.tab_container').prev().find('li.active');
    let dir = $(this).text().trim() == 'Пред.' ? 'prev' : 'next';

    if (dir == 'prev') {
        if (tabsToggler.prev().length) {
            tabsToggler.prev().addClass('active').siblings().removeClass('active');
            tabsContent.prev().show().addClass('active').siblings().hide().removeClass('active');
        }
    } else {
        if (tabsToggler.next().length) {
            tabsToggler.next().addClass('active').siblings().removeClass('active');
            tabsContent.next().show().addClass('active').siblings().hide().removeClass('active');
        }
    }
});

Я бы сделал так - с двумя зависимыми слайдерами

document.getElementById('button').addEventListener('click', function(e) { //тут ID-кнопки
  e.preventDefault();
  if (this.innerText == '0') {
     return;
  } else if (this.innerText == '1') { 
     alert('Значение 1');  
  } else {
     window.open('https://site.ru');
  }
});

Дык у вас же иконки - это шрифт FontAwesome.
Ну такое себе имхо решение - оборачивать шрифт в svg.

Добавить версию при подключении, условно до изменений было:

<link rel="stylesheet" href="style.css">
<script src="/script.js"></script>

Можете просто после изменений дописать к ним версии, например

<link rel="stylesheet" href="style.css?v=1.0">
<script src="/script.js?v=1.1"></script>

В большинстве случаев это сработает.

Это как пример, дальше под ваши задачи измените данные

.simple {
        display: inline-block;        
}
.simple:after {        
        content: '';
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-left: 30px;
        background-image: url("https://cdn1.savepice.ru/uploads/2022/4/16/edcafd0e519812c52d181453d55029dd-full.png");
        background-repeat: no-repeat;
        background-size: contain;  
}
.simple:hover:after {
        background-image: url("https://cdn1.savepice.ru/uploads/2022/4/16/b65792e10f9241773936ac68751ba911-full.png");
}

Потому что в toggleClass класс надо указывать без точки, т.е.

$('.header__burger,.header__menu').toggleClass('active');

Потому что у body указаны свойства justify-content: center; align-items: center;. Значит все дочерние элементы будут отцентрированы вертикально и горизонтально.