const cancelable = fn => { // Создаётся функция cancelable, которая принимает функцию и сохраняет в переменную fn
  const wrapper = (...args) =>{ // Создаётся функция-обёртка, которая принимает любой набор аргументов
    if(fn) return fn(...args) // Если в cancelable была передана функция, то вызывает её с необходимыми аргументами
  }

  wrapper.cancel = () => fn = null // Добавляет свойство во wrapper для очистки переменной fn 

  return wrapper // Возвращает обёртку
}

const fn = par =>{ // Функция, которая оборачивается в декоратор со своим аргументом
  console.log('Function called, par:',par)
}

const f = cancelable(fn) // Создаёт обёртку вокруг fn

f('first') // Function called, par: first
f.cancel() // fn является переменной внутри cancelable, здесь мы её обнуляем
f('second') // Ничего не выводит, потому что условие у wrapper отрабатывает, только если функция есть

Продолжай изучать JS по Кантору. В конце каждой секции есть задачи, выполняй все, не важно какой они сложности. По Proxy, Reflect и регуляркам можно вскользь пробежаться и не заострять внимание. Параллельно делай задачи на codewars, hackerrank, leetcode. Чем больше, тем лучше. Если в программировании с нуля, то желательно тысячу часов набить хотя бы.

Когда простые задачи начнёшь щёлкать как орешки, начинай читать про структуры данных и алгоритмы. По структурам данных можно в принципе любой источник брать, там всё одинаковое. Можешь глянуть вот эту репу. По алгоритмам советую посмотреть Яндекс. Там только базовые примеры разбираются, но на начальном этапе этого хватит. Когда преисполнишься в этих двух аспектах, начинаешь брать сложные задачи всё с тех же ресурсов (литкод и другие). Лучше даже это параллельно делать - изучать темы и решать задачи.

Опять же, параллельно с задачами выше начинай изучать webpack. Продолжай верстать, но уже добавлять какую-то логику на JS. Желательно ручками без плагинов, чтобы потом в дальнейшем настраивать эти плагины без особых проблем и вообще понимать что можно с их помощью сделать, а что нет.

Дальше можно прочитать Кайла Симпсона. К этому моменту ты скорее всего поймёшь, о чём в книге идёт речь.
Почитай про HTTP: тут и тут, знать как он работает - мастхэв для фронта. Теперь можно не просто верстать сайты, а заполнять их контентом через работу с API всевозможных сервисов.

Вот тут можно начинать изучать Typescript и переписывать всё, что сделал ранее, на TS. Самая лучшая практика, как по мне

Потом самое время выбрать фреймворк. Бери любой из понравившихся (кроме старья), читай доку и делай всё что выше, но уже на фреймворке. Со временем, если станет скучно, можешь залезть в их кишки, посмотреть как работает реактивность и другая "магия". Вообще фреймворк можно начать изучать и раньше, но я бы советовал к нему приступать, когда всё то же самое ты можешь сделать и без него. Это из личного опыта. Дока становится максимально понятной, не возникает дополнительных вопросов и в целом меньше косячишь.

По шаблонам и паттернам я раньше читал Рефакторинг Гуру (с енотом). Там примеры на Typescript. Ссылку не кину, мало ли что.

P.S. Все распиаренные курсы - хрень, не советую ими пользоваться. Тем более некоторые из них вообще составлены дилетантами. Это мой знакомый синьор говорил лет 5 назад. А позже я и сам пару раз столкнулся с этим (если в общем - такие ошибки даже стажёры в крупных компаниях не совершают).
Вместо этого следи за современными трендами, отслеживай каких-нибудь людей (я в своё время вот на этого парня наткнулся). Подпишись на какие-нибудь дайджесты типо www.awwwards.com. Смотри как делают другие, пробуй повторить. Рано или поздно начнут свои идеи появляться

Конкретно клик по стрелочке не получится обработать, но можно сделать обработчик для направления скролла, если нужно