Юрий

• Вставка через элемент img - если у вас изображение контентное (содержат важное для пользователя), например логотип.
  
• Вставка через в качестве background-image: url() - если у вас изображение декоративное (обычные иконки, как у ваших примерах) и никак не изменяется при взаимодействии с пользователем (об этом ниже). Например, для простых иконок к заголовкам разделов можно использовать псевдоэлементы ::after и ::before + background-image c урлом на свгшку. Не засоряет таким образом разметку.
  
• Вставка через элемент svg прямо в код - если у вас изображение декоративное и нужно будет при каких-то условиях, например, изменить заливку свгшки или цвет обводки с помощью CSS. Например, красная иконка в кнопке при наведении на кнопку становиться белой. Проблема в том, что, чтобы изменить ее цвет через CSS способом с псевдоэлементом мы можем только заменив на другую такую же картинку, но с белым цветом. А можно при наведении сделать так:
  

  button:hover svg {
     fill: white;
  }

  
  И все - обратиться к этой иконке и залить ее белым цветом. Поэтому, чтобы управлять возможностями свгшек через стили эта SVG должна быть именно в разметке.
  
  

Вариантов использования много и тут следует смотреть по конкретной ситуации.
Есть еще возможность не добавлять весь свг код в разметку, а использовать свг спрайты, что очень рекомендую. Ими тоже отлично управлять через CSS, упрощает разметку, особенно, если какая-то иконка используется многократно. Вот пара ссылок:
Раз
Два

Селектор в селекторе — это не валидный синтаксис. Автор видео использовал какой-то препроцессор, который такой синтаксис позволяет, и сам конвертирует его в обычный CSS без вложенности.

Например
https://sass-scss.ru/documentation/rasshirenie_css...

Смотря, для каких целей.
Если для просто прослушивания музыки, там 25-200 гц задрать или верха срезать - пожалуйста, мультимедийка и есть мультимедийка, но для других задач, например, для работы со звуком, как правило выбирается аппаратура с ровной АЧХ для мониторинга

Встроенного дефендера хватает с лихвой

Из бэкапа.
Теперь вы его будете делать.

Для глубоко изучения JS

Вряд ли есть что-то лучше серии книг Kyle Simpson - You don't know JS, где одной только теме про thisили замыканию уделена целая книга

Интересен супер подробный разбор event loop

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

Что можно считать лучшим источником

Собственно Standard ECMA-262

margin: 0; добавь у тегу

padding-top в процентах например? padding-top: 50% + вложенный блок с position: absolute, width: 100%, height: 100%

В 3д редакторе создается модель и анимируется, потом нарезается покадрово, получается набор изображений типа такого. Потом к скролу страницы привязывается функция, которая переключает отдельные картинки. В простом случает это просто img где меняется src, в сложном это canvas с предзагрузкой. Много готовых плагинов, например.
Для коротких анимаций можно объединить кадры в спрайт и переключать положение, например плагином

Мой любимый фокус https://jsfiddle.net/Ankhena/56Ltxdkq/