Как правильно реализовать выбор данной опции?

Владимир Коротенко, дело в том, что мои аргументы основаны на спеке. А ваши ни на чем. Более того, вы путаете теги и атрибуты.
Поэтому, мы не будем продолжать дискуссию. Тем более, что, вероятнее всего, вы продолжите делать формы дивами и мы тут со своей спекой ничего не изменим.
Но автор вопроса поддержку получил и этого достаточно.

Как правильно реализовать выбор данной опции?

Владимир Коротенко, я не приходила за советами. Я пришла поддержать аудиторию выступающую за семантику, а заодно автора вопроса.

Каким образом можно реализовать такую штуку?

Overlord934, доступно скрыть. С помощью одного из паттернов visually-hidden

Как сделать данный адаптив?

Да нет, просто адаптировать табличку.

Аналоги
https://codepen.io/AnnaSummer/pen/KKBJaXG
https://codepen.io/AnnaSummer/pen/rNrPyXz

Каким образом можно реализовать такую штуку?

Overlord934, Вообще, то, что нарисовано - это логотип.
Его можно вставить и в стили, потому что уже есть лого в шапке.
Можно и как img. От читалок, скорее всё таки скрыть, опять таки и потому что уже есть в хедере и потому что вы хотите к нему норм текст.

Если к этому ещё нужен и текст, то visually-hidden в помощь (легко гуглится). Например, для h1.

Как правильно реализовать выбор данной опции?

Владимир Коротенко, а вы без картинки? Какой контейнер? Все картинки там фон. Стилизовать не будете? "Само прилетит?"
Какую обвязку, чтобы это работало? О чем вы вообще? Это работает из коробки форм.

Инпут и лейбл с двумя спанами. Это говнокод? Я, пожалуй, пойду отсюда.

Как правильно реализовать выбор данной опции?

Владимир Коротенко,

что вам мешает насыпать их в эти самые дивы

Мне мешает сумма написанных слов: div + aria (role) + tabindex и вот это всё или один нормальный семантический тег.
Другое дело, что мешает использовать семантику при вашем подходе...

Как правильно реализовать выбор данной опции?

Владимир Коротенко, это форма, потому что по сути мы собираем данные, что-то там делаем и возвращаем пользователю результат.

Про тэги доступности вы видимо не слышали?

Ага, form для формы и т.д.

Если вы про aria, то документация практически начинается со слов, сначала средства html, а если никак, то уже aria, role и т.д.

Как правильно реализовать выбор данной опции?

Это должно быть реализовано как группа скрытых радиокнопок, спрятанных за картинки?

Да, типа того.
Стилизованные лейблы от этих инпутов.
Или лейблы поверх инпутов с apperance none.

Как разместить изображения по центру?

Какие еще абсолюты для этой задачи? Да еще и фикс высота у карточки. С ума сойти.

Как поменять цвет определенного слова в тексте внутри input text?

Сергей delphinpro, caret-color: #cc0000; вернет курсор

Каким образом можно реализовать такую штуку?

Overlord934,

Всмысле текст делать svg картинкой вместе с фоном?

Хорошо бы не забыть, что текст текстом нужен скринридерам и читалкам.
Если вы считаете этот текст не текстом, а не имеющим смысла изображением, тогда вообще хоть чем его вставляйте.

Как сделать вертикальную линию с рисунком между адаптивными блоками?

petersem, сделать обычными псевдоэлементами с абсолютным позиционированием.
В зависимости от количества элементов псевдо можно делать как самим элементам, так и родителю.
Если элемента 2 или 3, то удобнее родителю и размещать гридами или флексами, а не абсолютом.

Как поменять цвет определенного слова в тексте внутри input text?

Градиентом.
Но придется вычислять где он начинается и заканчивается.

Аналог https://jsfiddle.net/Ankhena/5jecmvw0/1/

Как сделать переход между элементами?

yann1n, множественные фоны пишутся через запятую. Самый первый фон - верхний. Самый последний - нижний. Между ними в соответствии с порядком.

Каким образом можно реализовать такую штуку?

Как такое можно реализовать?

Использовать пропорции и относительные единицы измерения.

Аналоги:
https://codepen.io/AnnaSummer/pen/QWQOvzy
https://codepen.io/AnnaSummer/pen/eYVeWXR

Как закрасить линию перед ползунком через css?

Даниил Секретов, градиентом через кастомные свойства css. (На js)

Ссылка без анкора на сайте для SEO — хорошо или плохо?

<div class="box" data-text="Заголовок">
    <a href="url">
        <h2 class="visually-hidden">Заголовок</h2>
    </a>
    <div>Описание</div>
    <img src="url" alt="Описание картинки">
</div>

Для box задать грид.
Ссылку вниз на все строки грида.
В ::before вывести текст из data
Всем, кроме ссылки задать pointer-events: none

Не уверена, что мне нравится такой вариант, но пожелания сеошника будут выполнены с минимальными потерями.

Альтернатива: оборачиваете заголовок в в ссылку. Ссылке задает псевдо, чтобы растянуть зону клика. И overflow для карточки.

Как сделать переход между элементами?

Обычный множественный фон.
Зачем для этого пустой div?

Абсолюты тут вообще не нужны.
Контент, который должен быть внутри header, должен быть там и в разметке.
А вы вытащили его наружу, а потом позиционировали его абсолютом. Зачем??
Почитайте про поток, флексы, гриды, семантические теги.

И старайтесь не использовать id для стилизации, не стреляйте сами себе в ногу.

<body>
  <header class="header">
      <div class="container">
        <h1 id="server-name">Old Memories</h1>
        <a id="discord-link" href="https://discord.gg/WpWxxnrN">Наш Discord</a>
    </div>
  </header>

  <main class="main">
    <section class="about">
      <h2 id="about-project">О проекте</h2>
      <p>текст</p>
    </section>
  </main> 

<script src="script.js"></script>
</body>

И для .header задавайте фон картинкой и градиент.

Как таким образом расположить стрелки в slick slider?

а стрелки как бы в контейнере

Я не поняла, они уже в контейнере или нет.
Короче: обертке контейнерную ширину и выравнивание по правому краю.

к этому при адаптиве не слипались

Собственно, отступы это margin или gap.
Без примера кода в песочнице codepen.io не понятно, с чего они у вас слипаются.