Как сверстать такие линии на css, которые будут соединять блоки?

Псевдоэлементами.
SVG.
Что именно вы пробовали, что не получилось и что вызывает сложности?

Почему свойство min-height со значением min-content игнорируется?

imko, прекрасный план. А если поменять в конце высоту на auto по этому же плану?

Почему свойство min-height со значением min-content игнорируется?

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

Зачем задавать свойства непригодные для решения задачи, а потом удивляться, что они работают не так?

Не работает npm init в терминале web storm. Как исправить?

А что, не в WebStorm работает?

Обычно это значит, что вы либо забыли установить Node.js вообще либо иногда нужно перезагрузить терминал/комп.

Как игнорировать ошибки компиляции свойств grid из scss в css?

Ваш редактор не понимает свойств для грида с префиксами -ms и вы всерьез считаете, что это проблема грида, css и scss?
Разумнее поставить к вопросу тег VS Code, а остальные стереть.
А ещё лучше писать это Микрософту.
Только в данном случае, я думаю, что ответ будет чем-то вроде "ИЕ ушел и учить редактор понимать какие-то допотопные костыли не имеет смысла"

Короче, если вам нужна поддержка гридов в ИЕ, не смотрите на подчеркивания.

Swiper: как збросить дефолтные настройки на стрелках навигации?

захожу в инспектор вижу что мои стили все ровно перебивают те что заданы по умолчанию

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

Ну и !important, если совсем беда с версткой.

Как сделать так, чтобы кнопка не растягивалась?

Если зададите фон ссылке, то убедитесь, что она и не растягивается...

Рамка у вас задана для обертки.
И отсюда вопрос: зачем вообще эта обертка?

Ещё вы пытаетесь задать верхний margin инлайновому элементу. Так не работает.

Как спозиционировать относительно фона, чтобы избежать смещения при уменьшении ширины?

но мне кажется каким-то костыльным

Ну да.

Есть ли более красивый и чистый способ?

Посчитать положение точки нормально, с учетом размера самого маркера и положения его центра.
Обычно в этом помогает transform. (Вспомните, как вы центрируете элементы абсолютами)

Как сделать нижнее подчеркивание ссылки намного ниже?

1. nav - это основная навигация по странице. Внутри nav хорошо бы сделать список, а уже в нем ссылки.
2. Опустить бордер = увеличить расстояние между границей и текстом = padding
3. Либо использовать псевдоэлемент, а не бордер. Тут зависит от того, какая область клика вам нужна.
4.

и сделать данную ссылку активной

Скорее активная это не :active, а та, которая указывает на текущую страницу.
Т.е. либо дополнительный класс либо aria-current="page" и селектор по атрибуту.
5.

Но проблема в том что opacity все перебивает

Либо убирайте при наведении и у активной либо задавайте цвета через rgba
6.

И еще к тому же icon__search не меняет своего цвета.

Было бы удивительно, если бы цвет png картинки менялся свойством color.
Но также удивительно, почему эта лупа не svg. Как только она станет svg она сможет меняться через свойство color, если в самой svg fill будет задан как currentColor.
Есть и другой вариант: убрать лупу из разметки (вообще прекрасно) и вставить как mask (не забудьте префиксы) в css и менять цвет через background-color.

p.s. Про свойство text-underline-offset. С виду кажется, что оно может помочь, но если пункт меню будет в две строки - линии тоже будет две.

Как указать главную кнопку submit?

Павел,

Можно конечно, но вот хочу решить по другому.

Явные симптомы нарушения логики в форме.
Но всю задачу мы не знаем, поэтому только так.

Swiper: как исправить позицию центрального блока?

slidesPerView: "auto",

Как border опустить вниз?

1. nav - это основная навигация по странице. Внутри nav хорошо бы сделать список, а уже в нем ссылки.
2. Опустить бордер = увеличить расстояние между границей и текстом = padding
3. Либо использовать псевдоэлемент, а не бордер. Тут зависит от того, какая область клика вам нужна.
4.

и сделать данную ссылку активной

Скорее активная это не :active, а та, которая указывает на текущую страницу.
Т.е. либо дополнительный класс либо aria-current="page" и селектор по атрибуту.
5.

Но проблема в том что opacity все перебивает

Либо убирайте при наведении и у активной либо задавайте цвета через rgba
6.

И еще к тому же icon__search не меняет своего цвета.

Было бы удивительно, если бы цвет png картинки менялся свойством color.
Но также удивительно, почему эта лупа не svg. Как только она станет svg она сможет меняться через свойство color, если в самой svg fill будет задан как currentColor.
Есть и другой вариант: убрать лупу из разметки (вообще прекрасно) и вставить как mask (не забудьте префиксы) в css и менять цвет через background-color.

Как указать главную кнопку submit?

Не делать ненужную сабмитом.

Как правильно записать в SCSS стили для такой разметки?

Yriii, или не страдать фигней и использовать кастомные свойства css, переопределяя их в модификаторе.

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

Кто-то же написал в вашем коде col-auto...

Отправка данных на почту относится к вёрстке? считается ли это вёрстку, если это работа с данными?

NarutoHokage, к верстке нет, не относится.
Должен ли это делать верстальщик - как договоритесь. Поскольку скриптик, например, на php отправляющий почту не сложнее валидации формы на js (скорее проще).

Отправка данных на почту относится к вёрстке? считается ли это вёрстку, если это работа с данными?

NarutoHokage,

Кажется еще с самого первого вопроса ясно , что вопрос не относится к коду js. Но вы зачем то открыли его и потратили время чтобы указать мне на это

Так и зачем вы поставили тег javascript? И тем самым пригласили сюда людей интересующихся им.

Почему появляется скрол при позиционировании?

Действительно, откуда может быть скролл, если вы сказали элементу выползти на 60 пикселей за него?

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

Как сделать три колонки на flex?

QnaTwitt, я вообще не понимаю проблему.
Нужны 3 колонки. Вы можете их сделать. Но нужен gap.
Так почему вы не можете его задать-то?

Если что, li нельзя оборачивать в div.

Как сделать три колонки на flex?

QnaTwitt, вы в состоянии флексом сделать три колонки флексами?