Василь Бойко

Parallax footer ищите и найдете.

$('.main-menu__item.active').prevAll('.main-menu__item');

Точно так, как вы сами описали, только на языке кода. Волшебной функции FindWhatINeed() не существует.

$('.parent') // берем родительские блоки
  .on('mouseenter', '[data-id]', event=>{ // вешаем обработчики на дочерние
    let id = $(event.target).data('id'); // узнаем id
    $(event.target).closest('.parent') // поднимаемся до своего родителя
      .siblings('.parent') // переходим к соседу
      .find('[data-id='+id+']') // берем в нем нужный дочерний
     //... что-то с ним делаем
;
  })

Такой код будет работать в обе стороны.
Если нужно только в одну, то делаем выборку только одного родителя

$('.parent').eq(0) // берем родительские блоки - только первый

Держите https://jsfiddle.net/njrjw18k/ уголки сами сделаете

https://learn.javascript.ru/onscroll
Когда доскролили к нужному элементу, добавляете класс и анимацию( если нужна ).
На jquery будет проще сделать.

Bootstrap содержит много лишнего по причине своей универсальности, приспособленности "на любой случай".
После n-ого десятка проектов накопился свой багаж решений. База для форм, кнопок, галерей, комментариев и т. д. Все решения лаконичные, без лишнего мусора и благодаря этому легко масштабируются под новые проекты.
Сетка опять же своя. Была создана однажды и дополнялась/редактировалась от проекта к проекту пока не стала условно идеальной.

есть такая штука, называется w3.org
она "задаёт" стандарты по "вертске". Рекомендую ознакомиться.
Вот тут и тут можно проверить - по "феншую" или нет.

Иногда "проще" не значит лучше, (если вы планируете создавать рекламные компании, хотите хорошие показатели по SEO и т.д.), т.к. Google, Yandex и другие напрямую смотрят какой у вас сайт (в т.ч. вертска по "феншую" или нет) и напрямую (В ЧАСТНОСТИ) влияет это всё на цену в рекламе, позиции в поиске и прочее... (это не значит, если всё будет соответствовать 100% по "феншую" и всем стандартам, Ваш сайт будет на 1-ом месте в поиске)

Есть стандарт w3 и нужно ему следовать. К примеру по новому стандарту, не обязательно использовать закрывающие теги li, у тегов img обязательно должен быть атрибут alt, недопустимы пустые свойства в css, очень желательно использовать все теги заголовков h1-h6 и причем h1 должен быть всего 1 на странице, теги h2-h6 не должны быть выше такогоже тега, но с числом меньшим (к примеру тег h3 не должен быть в DOM выше, чем h2 и т.д.) и множество множество что ещё

UPD
если "богатая семантика" будет кроссбраузерной, проверка тут не покажет ошибок, то хоть в дивах, хоть на всех html тегах верстайте

90% так и надо делать!
1 правило хакера (точнее компьютерщика кодера, программиста) - не создавать велосипед, а использовать готовое.
Если для повышения скила - то лучше конечно самим придумать/разработать/написать.
Если для всего остального - чем быстрее напишите (особенно с учётом/доработками вашего проекта) - тем лучше для всех. Останется время пиво попить и футбол посмотреть) или с семьёй побыть рядом.

п.с. для повышения скила можно и тостер использовать в частности - пытаясь отвечать/решать вопросы +
попробовать в чужом коде сделать рефакторинг +
когда столкнётесь с тем, что даже примерно аналога нету - конечно придётся самим решать, НО, вы же не просто ctrl+c ctrl+v делаете, а подгоняете код под ваши нужды и хоть немного но разбираетесь в том, что он делаете (т.е. вы увеличиваете скилл). И лучше за n-промежуток времени столкнуться 1-2 раза, когда сами ручками и головой будете решать ТАКОЕ, чем на каждый чих - тратить время

Если я пишу код на основе других, это плохо?

в 90% случаев - НЕТ

п.с.с.
умение найти чужой код (понять его), который будет работать + его доработать(встроить) - тоже, очень и очень важное умение!

Легко делается в любом векторном редакторе (например inkscape), в том числе вместе с текстом: активным элементам даются осмысленные названия, классы и идентификаторы. Далее SVG встраивается целиком в HTML код (сразу или через AJAX) — чтобы использовать классы и скрипты, в скрипте активным элементам назначаем показ всплывающих подсказок на событие hover.

Слой номер раз: SVG картинка со схемой, вставляете ее в код страницы. Областям задаете какой-нибудь класс, чтобы селекторы были более понятными.

Слой номер два: Плашки с текстом. Их удобно не в картинку пихать, а верстать на html/css и располагать поверх картинки с помощью абсолютного позиционирования или трансформаций. Если сообразить для картинки viewbox='0 0 100 100', то даже считать ничего не нужно будет.

Дальше на css на :hover/:focus по областям показываете плашки с текстом. Можно это на :nth-child построить или еще как-нибудь - смотрите, что будет удобнее. Ну и самим областям меняете fill на оранжевый.

P.S.: Можно еще сделать, чтобы в плашках как бы вода с волнами наливалась при наведении мыши, но это уже совсем другая история...

Сделай.

https://jsfiddle.net/tofxLzrL/

Попробуй так:

.topmenu li:hover .submenu{
  display: block;
}

вы пропустили пробел

Все просто смотрим z-index модалки и ставим на 1 больше.
Или плохой вариант: z-index: 99999; Но за такое в приличном обществе можно в нос получить.