Как заставить работать CSS:Hover при прокрутке Slick Slider?

Ivseti, id не могут дублироваться в рамках одной страницы.

p.s.
Уберите цвет stroke из разметки или используйте currentColor, хоть поудобнее будет.

p.p.s.
И зачем вы дублируете код SVG столько раз? Прочитайте про <use> и переиспользуйте.
Или вынесите иконку в css. Псевдоэлементом и масками. Зачем она вам в разметке?
https://codepen.io/noahblon/post/coloring-svgs-in-...

Почему у меня не отображается половина сайта, если я его запускаю не через VS code?

Скорее всего неверные пути к файлам.
Смотрите ошибки на вкладке Console в инструментах разработчика.
Если это так, то читайте https://htmlacademy.ru/blog/articles/links

Если нет, то придётся показать ссылку на сайт. Можно использовать Github Pages.

Почему кнопка приобретает высоту?

Ошибка при компиляции, npm?

https://sass-lang.com/blog/libsass-is-deprecated
https://sass-lang.com/dart-sass

Как правильно создавать css файлы?

грамотные специалисты к каждой html-странице, да даже к каждому html-блоку добавляют свой css файл

Может быть вы всё таки имеете в виду препроцессорные файлы (scss, less и т.д.), а не css?

Зачем добавлять for к label?

MDN

НО если убрать эти теги, то код все равно будет прекрасно работать.

Не очень понятно, что вы подразумеваете "под убрать эти теги".

Если вы уберете атрибут и оставите разметку как есть, то работать ничего не будет.
Работать оно будет только если input окажется внутри label. Да и то, MDN рекомендует и в этом случае использовать связку по for-id для некоторых читалок.

Как правильно создавать css файлы?

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

=> для разных проектов решение может быть разным.

Также, до кучи, можете почитать про critical css

Как найти верный индекс элемента массива?

Thomas Faber, ладно, помогу вам https://yandex.ru/search/?text=javascript+%D0%BF%D...

Как найти верный индекс элемента массива?

Thomas Faber, так и что именно у вас не нагуглилось и не получилось?

Как сделать такую же карусель, как на этом сайте?

Два любых слайдера. Один в одну сторону, другой в другую.
Например, swiper.

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

Измените селектор
https://habr.com/ru/post/85920/

Как разместить слово и стрелку?

Гуглить по запросу "стилизация select".
Но для начала хорошо бы знать, select у вас там или какая-то его замена.

Так что лучше сделайте codepen так, чтобы было понятно, что вы творили и где не получилось.

Как правильно сделать иконку возле текста?

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

Как правильно сделать иконку возле текста?

sciencefront,

и тогда текст будет более корректно ввести

Да?
Ну ок, покажите потом, пожалуйста.

Как правильно сделать иконку возле текста?

sciencefront, спеку-то?
Думаю путь будет нелегким :)
Или геометрию?

Возможно, js покажется вам полегче.

Можете поставить br и убирать их через media (или совместно с js).

Проще всего из этого поправить дизайн или дизайнера.

Не применяется css свойство от @media, что делать?

Dmasgj, вот и смотрите что у вас со сборкой, что media оказались выше основных.

Не применяется css свойство от @media, что делать?

В инспекторе кода данные свойства перечёркнуты.

На вкладке Computed можно посмотреть чем они перебиваются и почему.
Скорее всего неверный порядок подключения media

Как правильно сделать иконку возле текста?

sciencefront, да, текст ведет себя именно так.

Как правильно скрыть блоки в GRID?

ES-Good, в стандартной 12-ти колоночной сетке 12 столбцов, а не 2, как у автора.
Не, грид, конечно, дорисует недостающие 10, но тогда проще вообще не указывать их количество, чем так.

Как правильно сделать иконку возле текста?

sciencefront, да, так и есть

При min-content для li:

Если вы зададите фикс отступ и space-between, то элементы равномерно распределятся, отступы будут большими, но не меньше указанного.
Если вы зададите только space-between, то элементы равномерно распределятся, отступы будут большими.
Если зададите только фикс отступ, то элементы не займут весь контейнер, отступы будут фикс.

Ещё вы можете задать min-content не для li, а для ссылок. А для li, скажем, flex-grow: 1.
Тогда между li будет фикс отступ. А стрелка прижата к тексту.
При отсутствии декоров (фонов, рамок) визуально это ничего не изменит.
https://codepen.io/AnnaSummer/pen/WNzPZqp

Пока вы сами себе противоречите. То хотите space-between, то фикс отступы.
Первая песочница соответствует вашему срину из комментария

примерно так (это планшет)

Это:

ожидалось отступ по 10 или 20 (не важно) , чтобы задать можно любой
и если отступ будет по 20 то текст в пунктах больше влезет

ещё меньше понятно.
Если отступы между пунктами будут по 20, а не по 10, то для текста останется меньше места. А не то, что вы пишете.