Андрей Хохлов

<button type="button" @click="handler"></button>

handler(e) {
  console.log(e.target);
}

Определяйте тач-экраны.

Собираем https://modernizr.com/
Детектим поддержку touchevents и добавляем класс
Стилизуем исходя из этого класса

Вы его вызываете раньше, чем объявляете.

Ставим Node.js, npm, pug
https://www.npmjs.com/package/pug

Читаем документацию: https://pugjs.org/api/reference.html

По примерам из документации пишем скрипт, который возьмёт ваш шаблон и json и нарендерит сколько нужно страничек.

Вы не понимаете как работает селектор ~
https://learn.javascript.ru/css-selectors

Ну и к остальной разметке стоит приложить подорожник...

1. Изучите свойство background https://webref.ru/css/background
2. Это не бордер, изучите что такое псевдоэлементы (::before, ::after) и сделайте с помощью них. Получится элемент определенной ширины и высоты, с фоном (или без высоты и фона, но с бордером), внутри h1.

Вам неплохо бы изучить Vue для начала, хоть чуть-чуть.

Если кратко, то
установите vue-router.
ссылки в сайдбаре - router-link, контент - router-view.

Туториалов и примеров кода в сети великое множество.

Как альтернативный вариант - просто переключать компонент в блоке контента. Но это уже не SPA, а табы какие-то получатся.

Overflow: hidden для родителя картинки

https://www.w3.org/2010/05/video/mediaevents.html

Ну или плеер ютуба, у него своё апи.

Ловите завершение видео, не загрузку видео, устройства которые не умеют в автоплей и показывайте контент по этим событиям / параметрам.

0. text-decoration: underline
1. Оборачивать каждую строку в строчный элемент и задавать border ему

Использовать хуки жизненного цикла: https://ru.vuejs.org/v2/api/#beforeCreate