intriga93

Страница в jsfiddle у вас загружена по https, а ссылки ведут на http. Такой переход сейчас по умолчанию запрещен, и браузер вам об этом даже ошибки выбрасывает в консоль.

И еще, вы слушаете все клики, но корректно обрабатываете только клики по ссылкам. Если кликнуть мимо ссылки - тоже будет ошибка.

Через querySelector

const tree = document.querySelector('#tree');

 tree.addEventListener('click', function({target}) { 
   if (target.tagName !== 'LI' || !target.hasChildNodes()) return; 
   target.querySelector('ul').classList.toggle('no')
 })

Данная строка не корректно написана - первая часть event.target.contains('.box') проверяет находится ли в event.target какой-либо элемент (а не название класса) и ответ будет булево значение (true/false).

Есть еще проверка наличия определенного класса, тогда должно так выглядеть
event.target.classList.contains('box') - тут название класса без точки, и опять же в ответ true/false.

Поэтому к этому результату не аппендинтся элемент elem.

Я бы так написала ваш код:
document.addEventListener('mouseover', function(event) {
let target = event.target;
// проверка - содержит ли элемент, над которым находится курсор, класс "box"
// если нет, то выход
if (!target.classList.contains('box')) {
return;
}

let tooltip = target.querySelector('button').dataset.tooltip;
console.log(tooltip);

var elem = document.createElement('div');
elem.className = 'tooltip';
elem.textContent = tooltip;
// добавление элемента в target
target.append(elem);
});

Но лучше ловить mouseover на кнопке, которая находится в div'е, т.е. добавить кнопкам класс
проверять target на этот класс, а tooltip добавлять в родителя кнопки:

document.addEventListener('mouseover', function(event) {
let target = event.target;
// проверка - содержит ли элемент класс button над которым находится курсор
// если нет, то выход
if (!target.classList.contains('button')) {
return;
}

let tooltip = target.dataset.tooltip;
console.log(tooltip);

var elem = document.createElement('div');
elem.className = 'tooltip';
elem.textContent = tooltip;

// добавление элемента в родителя target
target.parentElement.append(elem);
});

Обновил пару раз и показал мне тоже.
Это предупреждение о том, что Вы внутри цикла создаёте функцию, которая обращается на замыкание снаружи и в некоторых ситуациях может привести к неожиданному результату.

let panes = document.querySelectorAll('.pane');
for (let pane of panes) {
  pane.querySelector('.remove-button').addEventListener('click', onRemoveClick)
}

function onRemoveClick(evt){
	evt.target.closest('.pane').remove()
}

Вот так не будет предупреждения.

columns https://webref.ru/css/columns

Вот балбес вроде вас. А вот ещё. И ещё.

position: fixed;
right: 0;
top: 0;

Можно еще для svg задать атрибут preserveAspectRatio="none" и высоту через css, тогда она будет растягиваться непропорционально.

technicalseo - вот примеры.
Так же у яндекса и гугла есть валидаторы.

https://schema.org/docs/documents.html

https://jsfiddle.net/9w5fz326/

Градиент генератор вам в помощь: https://cssgradient.io/

Проходим циклом по каждому блоку со слайдером, находим в нем нужные элементы и инициализируем:

В fill после %23 вставляйте нужный цвет в hex.