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

Norum, так откройте сайт и иконку, над иконкой написаны все варианты вставки на сайт, в том числе и юникод

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

Так откройте сайт, найдите иконку и посмотрите какой это символ.
Шрифт не забудьте подключить.

Как расположить 3 flex-элемента в одну строку и выровнять их первый-по левому краю, второй по центру, третий по правому краю родителя?

Rucklless, а теперь сделайте их разной (неизвестной) ширины, как просит автор.

Как сохранить цвет по нажатию на блок?

Сделал текущую задачу с помощью псевдокласса active

Не нужно путать :active и :checked.
Почитайте разницу.

И либо замените div на радио-инпуты или чекбоксы.
Либо замените их на кнопки и добавляйте класс на js.
div в любом случае не является интерактивным элементом.

transition: background 9999999s;

А это вообще сильный ход.
Почти через 116 дней цвет вернется в норму.

Как расположить 3 flex-элемента в одну строку и выровнять их первый-по левому краю, второй по центру, третий по правому краю родителя?

А почему вы решили, что это нужно делать флексами?
Разумнее гридами, единицами fr и justify-self

Как расположить 3 flex-элемента в одну строку и выровнять их первый-по левому краю, второй по центру, третий по правому краю родителя?

не выйдет ;)

Как изменить цвет у верхней и левой границы input?

Анастасия,

У меня top and left border были не такого цвета как right and bottom.

Так вы им специально и задали другой цвет.
Если вам надо все одинаковые, то и пишите один цвет для всех 4 границ.

Как изменить цвет у верхней и левой границы input?

Вообще, вы уже всё написали.
И границы у вас уже покрашены.

Что не так?

Когда менять дизайн от десктопа к таблету и от таблета к мобайлу?

к чему-то конкретному прийти не удаётся

И не удастся.
Каждый макет индивидуален. (Ну разве что будете делать копеечные сайты по принципу ctrl+c ctrl+v).

на каких брейкпоинтах именно это делать?

Там где ломается.
Причем для разных блоков это могут быть разные брейкпоинты.

Главное, что на любом экране, при любом размере окна выглядело прилично.

Есть дешевый вариант:
Ставят 2-3 брейкпоинта с фиксированной контентной шириной. На всех остальных будут поля.

Смотрите сайт с различных реальных устройств. Так глазками увидите, где что не так.

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

Vlad,

Лого плиткой разместить иконки соцсетей например.

Всё, как обычно, гридами или флексами.

Покажите в песочнице на jsfiddle.net что вы делаете с иконками соц.сетей и почему они не встают гридами или флексами, как вам нужно.

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

Vlad, хоть гридами, хоть флексами.
Что именно у вас не получается?

Как создать данную дорожную карту?

Tramplin333,
0. Простыня кода - очень хорошо, но в голове компилировать не удобно. Делайте песочницы на сервисах типа jsfiddle.net

1.

<h2 class="map_data"><li>2020</li></h2>

Это что за конструкция из тегов?
Всегда если что-то идет не по плану, начинайте с проверки валидатором.

2. Дальше я написала - начните с ширины. На скрине видно, что темные блоки занимают меньше половины ширины родителя. У вас 690 и 440.
И я бы сделала общую обертку, чтобы было кому рисовать вертикальную палку.

3. Используйте одинаковые классы для блоков и nth-child, если блоки идут поочередно.

4. Дальше подумайте, зачем вы пишете space-between, если на скрине явно видно, что никакого space-between там в помине нет.

Ссылку с примерами реализаций смотрите выше.

Как создать данную дорожную карту?

Тут куча примеров https://codepen.io/search/pens?q=timeline

но почему то не получается

Начните с ширины чтоль, уже получше будет

Как сделать такой эффект?

Я не понимаю, как сделать так что бы она потом за что то залетала, а не шла по верху.

Посмотрите внимательно в инструменты разработчика: у ссылок стоит overflow.

Можно ли как-то отключить Iphone custom select?

Интересно, зачем вы показываете ту часть кода, с которой нет проблем и не показываете ту, с которой есть?

Как сделать такой круг состоящий из разных дуг сделать с помощью css?

conical-gradient Если устраивает поддержка https://caniuse.com/?search=conical-gradient

Но я бы делала это с помощью SVG

Почему не работает событие по нажатию на button?

Артур Левенсон, Артур, что должно происходить при клике на кнопку?
Это и пишите в клике.
Сейчас вы пишете, что нужно только чтобы добавился класс. Ну ок, он добавился. Дальше что?

Распишите алгоритм просто по-русски. Потом переведите на JS.

А ведь даже в предыдущих вопросах был код с нормальной обработкой клика (если я правильно догадываюсь, что вы пытаетесь сотворить)

Как сделать такие фигуры на CSS?

https://qna.habr.com/q/1041994#answer_2013272
Для второго блока либо 2 градиента либо transform skew

Почему не работает событие по нажатию на button?

Артур Левенсон, я вообще не говорила что делать.

Вы спросили почему не срабатывает клик по кнопке. Я объяснила.
У кнопок нет родителя с классом box => ничего не происходит.
Более того, про класс box в коде больше нет ни слова. Поэтому будет удивительно, если что-то сработает.

Почему не работает событие по нажатию на button?

$(".btn").click(function () {
  $(this).parent(".box").toggleClass("active");
});

Это то, что написано у вас в скрипте по поводу того, что должно происходить при клике на кнопку.
Взять родителя кнопки и если он .box, то задать ему класс. И это всё.