Владимир Проскурин

Вы немного не так поняли пример, хотя он действительно странный. Там выше есть подсказка

Дайте ему достаточно времени, чтобы работать. Это свойство дает автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.

т.е. нельзя сразу при наведении добавлять will-change, нужно заранее. Также не рекомендуется сразу в стилях указывать will-change. Имея два данных факта, нужно найти способ заранее узнать, что скоро будет включена анимация, например, при наведении на родительский блок добавляем will-change к элементу, который будет анимироваться. Тут у нас будет время, пока пользователь наводит мышь конкретно на анимированный элемент.
UPD: в примере из mdn анимация как я понимаю, вероятно включается при клике на элемент.

Кроме официальной документации есть официальные видео уроки https://www.vuemastery.com/courses/intro-to-vue-js...

Однозначно - Лутц Марк Изучаем Питон.
UPD: Вообще, книга за 2011 год, что как бы делает ее устаревшей. Но там разбирается Python 3.*, поэтому я считаю, что знания все еще актуальны. И современного на русском есть еще хорошая книга https://www.ozon.ru/context/detail/id/141809676/ Если хочется чего-то совсем нового, лучше искать на английском.

Никак. Это окно для HTTP авторизации, через JS такое окно не отобразить и не обработать. Оно всплывает когда сервер возвращает HTTP код 401 и заголовок WWW-Authenticate.

Ну, есть конечно Vue Mastery. Но я не совсем понимаю, зачем прорабатывать материал, если он нереально простой. Если вы что-то там не поняли, рекомендую вернуться к изучению JS.

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

const persons = document.querySelectorAll(".counter-block-input")[0];
const restDays = document.querySelectorAll(".counter-block-input")[1];
const place = document.getElementById("select");
const totalValue = document.getElementById("total");

function calculateTotal() {
    const personsSum = +persons.value || 0;
    const daysSum = +restDays.value || 0;
    const placeIndex = place.selectedIndex;

    const total = (daysSum + personsSum) * place.options[placeIndex].value * 4000;

    totalValue.textContent = total;
}

persons.addEventListener("change", calculateTotal);
restDays.addEventListener("change", calculateTotal);
place.addEventListener("change", calculateTotal);
calculateTotal(); // сразу вызываем, чтобы обнулить поле

slider это объект, экземпляр класса Slider, а вы пытаетесь вызывать его как функцию. Вероятно, вы хотите вызвать метод slider, тогда пишите так
slider.slider();
но опять же, через опции вы передаете не функции, а значения результата вызова функции querySelector. Поэтому, в slider.slider будет список элементов document.querySelector(".text-slider")

Ну, в принципе нормальное решение. Можно упростить

$(function() {
  var isDevice = "mob"; /* mob tab desk */

  $(window).on("resize", function() {
    var windowWidth = $(window).width();
    let newDevice = 'desk';
    if (windowWidth < 768) {
      newDevice = "mob";
    } else if (windowWidth < 1024) {
      newDevice = "tab";
    }
    if (isDevice !== newDevice) {
        // тут пишем код
        isDevice = newDevice;
    }
  });
});

UPD: вот более расширяемое решение.

const breakPoints = {
  mob: 768,
  tab: 1024,
};

const isDevice = "mob"; /* mob tab desk */

$(window).on("resize", function() {
  const windowWidth = $(window).width();
  const newDevice = Object.keys(breakPoints).find(
    key => breakPoints[key] > windowWidth
  ) || 'desk';
  
  if (isDevice !== newDevice) {
      // тут пишем код
      isDevice = newDevice;
  }
});

тут конечно можно еще добавить всякие штуки для кеширования, или debounce функцию.

Не надо clip-path. Просто установите картинку для обоих блоков, и просто выровняйте картинку второго блока.
Ну вот пример. Я тут задаю
background-position: -20px -50px;
где -20px это отступ по горизонтале, т.к. блок не смещается влево-право, пишем туда величину из padding родителя. А -50px это тот же самый padding 20px, плюс смещение блока вниз 30px.

Уберите header из контейнера, а в контейнер поместите содержимое header'а

<header class="header-menu">
      <div class="container">
        <div class="header-menu__logo"><img src="img/logo.png" alt="Логотип"></div>
        <div class="header-menu__nav-bar">
          <nav class="header-menu__nav">
            <a class="header-menu__links" href="#">ABOUT</a>
            <a class="header-menu__links" href="#">CONTACT</a>
            <a class="header-menu__links" href="#">CATALOG</a>
            <a class="header-menu__links" href="#">BLOG</a>
            <button type="button" class="header-menu__btn" name="button">Sign in</button>
          </nav>
        </header>
     </div>

теперь у вас header на всю ширину, можете задавать ему border

У вас элемент с id=del создается внутри inputToDo, которая вызывается в checkText, при клике по push. А вы уже в onload хотите использовать элемент del, который еще не создан.
Решением будет добавлять обработку клика непосредственно после создания элемента del, прям в inputToDo. И еще, как я полагаю, inputToDo будет вызываться много раз, а значит, он будет создавать много кнопок с одинаковым id, что нельзя делать, в одном документе не должно быть элементов с одинаковым id.

А зачем тут фигурные скобки?

this.setState({
      text: [this.state.text.splice(index, 1)]
    })

так вы получите массив, в котором будет один элемент - массив (с которого вы удалили элемент).

Проще всего получить новый массив через функцию filter, отобрав только те элементы, которые не равняются искомому элементу. Если сравнивается ссылка, то можно даже получить индекс через indexOf, и удалить элемент по полученному индексу через функцию splice

Не надо никакого margin/padding, это все костыли. Блоку нужно пространство, дайте его ему. У вас проблема с тегом a, у него очень высокий дочерний элемент, а сам тег a является инлайновым. Вот такой стиль пропишите для a

margin-left: 20%;
display: inline-block;
height: 100%;
vertical-align: middle;

https://codepen.io/anon/pen/mZXxxq