skuvaWeb

У html-loader'a есть флаг ?interpolate, сможете разбивать свои файлы на "компоненты" (на самом деле это просто разделение html кода по файлам)

По синтаксису выглядит так
<div>${require('./components/gallery.html')}</div>

К сожалению, если элемент находится выше именно по DOM дереву, то к нему нельзя обратиться

В Документации есть autoFocus, по умлочанию он включен. Возможно можно инлайново отключить, что-то вроде data-autofocus="false" на модальном окне

Почитайте о SPA (single page application) , в данном примере вся верстка рендерится на стороне клиента. Не есть хорошо для поисковых роботов, поэтому существует SSR (server side rendering), почитайте и о нем, и вопросы отпадут)

Я считаю что лучше использовать flex, Вот пример

Если вы имеете перенос обеих точек, то измените свойство align-items у flex контейнера-родителя (.control-label в вашем случае)
Если вам нужно спозиционировать только 1 из 2 точек, то задайте родителю position: relative; а точке position: absolute; и двигайте как вам надо

Используй css селектор "+" и псевдокласс :focus
Что-то вроде

input:focus + .icon{
  opacity: 1;
}

SVG

Рассказываю относительно новый хак
Родителю
position: relative;
дочернему элементу

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

И все встанет четко по центру, но можно выровнять и только по горизонтали или по вертикали

Предположу что ты хочешь чтобы у тебя на странице не было скрола
Добавь в css

*{
  box-sizing: border-box;
}

У тебя внутри ссылки находится элемент , зачем это сделано непонятно.
Скорее всего дело в том, что у самой ссылки цвет задан синий. Задай тегу нужный цвет