Сергей

function headerScroll() {
  let headerTop = null;
  let headerSubstrate = null;
  let lastScrollTop = 0;

  function onScroll() {
    let scrollDistance = window.scrollY;

    if (scrollDistance > lastScrollTop) {
      headerTop.classList.remove('header__top-active');
      headerSubstrate.style.top = '-200px';
    } else {
      headerTop.classList.add('header__top-active');
      headerSubstrate.style.top = '0px';
    }

    lastScrollTop = scrollDistance;
  }

  function init() {
    destroy();
    headerTop = document.querySelector('.header__top');
    headerSubstrate = document.querySelector('.header__substrate');
    lastScrollTop = 0;
    window.addEventListener('scroll', onScroll);
  }

  function destroy() {
    window.removeEventListener('scroll', onScroll);
  }

  return { init, destroy };
}

const { init: initStickyHeader, destroy: destroyStickyHeader } = headerScroll();

const mediaQuery = window.matchMedia('(min-width: 768px)');

mediaQuery.addEventListener('change', (event) => {
  if (event.matches) {
    initStickyHeader();
  } else {
    destroyStickyHeader();
  }
});

https://developer.mozilla.org/en-US/docs/Web/API/M...

Фронт развился в какую-то неправильную сторону, это правда
Вкатиться на фронт очень сложно, это тоже правда. Причём, необоснованно сложно.

Я бы выделил два пути, как можно въехать во всё это:
1. Создать приложение на Vue или React по туториалам, затем разобраться, как и зачем оно всё
2. Разобраться как и зачем оно всё (aka Vanilla JS), потом заняться реактами

Имхо, вариант №2 предпочтителен и более прост, потому что на варианте №1 есть огромный шанс застрять, никогда не разобравшись, как оно работает а при любых нешаблонных ошибках поднимать лапки.

Что здесь нужно понимать:
1. Есть разные версии ES (ecmascript), они все обратносовместимые. Программист может писать на любой версии, какая ему нравится. Обычно берут последнюю стабильную

2. Для проекта обычно есть две версии ES: та, на которой пишут программисты и та, которая исполняется в браузере или в ноде (об этом позже). Например, программист пишет на ES8, а код транслируется на ES5. Это позволяет использовать последние предсмертные хрипы писки моды JS при этом запуская всё на древнейшем говне вроде IE11. Перегонкой кода из JS/TS одной версии в JS другой версии занимается транспилятор: babel / esbuild / swc

3. Новые версии JS содержат расширения стандартной библиотеки, которых нет в старых браузерах (например Array.from, Object.entries и т.п.). Эти дырки затыкают полифиллы, они же shims. Самая популярная дырозатыкательная машинка — corejs

4. Весь код очевидно не пишется в одном файле и может быть написан на TypeScript (он же TS), JSX/TSX (реактовый синтаксис). Всё это нужно собрать в один или несколько файлов, то есть скомпоновать. Этим занимается bundler: часть webpack / esbuild / spark / etc.

5. Этот же парень отвечает за то, чтобы та тысяча библиотек, что лежит в node_modules, попала в итоговый условный main.js, но не целиком, а только то, что используется. Последнее называется tree shaking (типа навозную кучу node_modules потрясли как дерево, что упало — то не нужно)

6. (то самое "позже) Код может исполняться не только в браузере пользователя, но и на сервере без браузера вообще. Это нужно для SSR aka Server Side Rendering. SSR — это такой глобальный вонючий костыль для SEO. Дело в том, что стандартные SPA приложения содержат один DOM элемент, куда цепляется всё остальное приложение вроде реакта или вью, которое уже содержит всю вёрстку прямо в JS. Но не все поисковики согласны с таким подходом и некоторые (не будем показывать пальцем на яндекс) не умеют выполнять JS и индексируют только тот самый единственный DOM элемент, который существует на этапе отдачи страницы в браузер. Это уже потом к нему JS движком дорисовывается весь остальной сайт. Соответственно, сайт индексируется от слова "никак", а некоторым это важно. Например, когда SPA — это не админка. Для этого есть два выхода: страницы, важные для SEO, рендерить чем-то не-реактовым или сделать SSR — делать за яндекс работу на сервере (на ноде), представляя в уме, что у нас есть DOM и браузер (на самом деле нет), на выходе получать начальное состояние HTML, отдавать его клиенту (браузеру или поисковому роботу), а JS'ом её т.н. "гидрировать", иными словами — оживлять.

7. webpack отвечает за всё вот это сверху в том или ином виде. Это такой кухонный комбайн, в который вкидываешь кучу хлама в одном виде, а получаешь другую кучу хлама в другом виде.

Начать советую с parceljs, который сильно проще в освоении, чем webpack. И на написании кода максимально без библиотек.

Подскажите как можно установить ему купленный домен

1. Арендовать у своего провайдера белый IP-адрес
   
2. Прописать его в A-запись доменной зоны
   
3. Прописать доменное имя в настройках своего web-сервера
   
4. Настроить проброс портов на своём маршрутизаторе
   

Под бесплатным имею ввиду просто взять свободный и не регать его в каких-то сервисах.

Незарегистрированное доменное имя не обслуживается dns-серверами. Поэтому каждый клиент должен будет прописать соответствие между этим доменным именем и вашим IP-адресом себе в файл hosts. Иначе работать ничего не будет.

конкретно для ноды и нпм - точно можно подключать репо с гитхаба:

npm install git+https://github.com/author/repo_name.git

и использовать
import variable from 'repo_name'

для composer тоже есть подобное: https://getcomposer.org/doc/05-repositories.md#vcs

Можно так сделать

let html = [
        {
            'type': 'div',
            'args': {
                'id': 'dialog',
            },
            'childrens': [
                {
                    'type': 'h1',
                    'args': {
                        'textContent': 'Заголовок 1'
                    }
                },
                {
                    'type': 'h2',
                    'args': {
                        'textContent': 'Заголовок 2'
                    }
                },
                {
                    'type': 'h5',
                    'args': {
                        'textContent': 'Заголовок 5'
                    }
                },
                {
                    'type': 'p',
                    'args': {
                        'textContent': 'Параграф'
                    }
                },
            ]
        }
    ];

    html.forEach(parent => {
        let parentObject = document.createElement(parent.type);
        Object.entries(parent.args).forEach(([key, value]) => {
            parentObject[key] = value;
        });
        parent.childrens.forEach(children => {
            let childrenObject = document.createElement(children.type);
            Object.entries(children.args).forEach(([key, value]) => {
                childrenObject[key] = value;
            });
            parentObject.appendChild(childrenObject);
        });
        document.body.appendChild(parentObject);
    });

В reduce() в передаваемом объекте добавьте поле для передачи индекса баннера.

Если встречается card – поле сбрасывать.
Если встретился баннер:
- нет индекса – брать i и сохранять его в объекте;
- есть индеса – использовать его.