Кирилл

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

Как ПК понимает, что он вообще делает?

Никак не "понимает", он просто следует инструкциям.

Откуда процессор знает, что ему делать?

Он не "знает", он следует инструкциям.

Посмотрите эти два ролика про шарманки:
https://www.youtube.com/watch?v=k5g-zySVO18
https://youtu.be/HjBhO9iqEc0

То-же самое можно сделать не из механических частей, а на основе электроники.
И эти штуки не "знают" и не "понимают" что им нужно играть и как. У них есть лента с инструкциями, и они по ней работают ничего не понимая.

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

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

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

var elements = document.getElementsByClassName('my-class');
Array.prototype.forEach.call(elements, function(element) {
  emement.addEventListener('click', function(e) { /* ... */ });
});

var elements = document.getElementsByClassName('my-class');
for (var i = 0; i < emements.length; i++) {
  elements[i].addEventListener('click', function(e) { /* ... */ });
}

ES6:

const elements = document.getElementsByClassName('my-class');
for (let element of elements) {
  emement.addEventListener('click', e => { /* ... */ });
}

// слушаем все клики на документе
document.addEventListener('click', (event) => {
    // проверяем наличие нужного нам класса у элемента по которому кликнули
    if (event.target.matches('.my-class')) {
        // делаем то что нам надо
    }
  
});

Мда.
$to = 'example1@bk.ru, example2@bk.ru'; исправляйте на

$mail1 = 'example1@bk.ru'; $mail2 = 'example2@bk.ru';

И потом вот так:

mail($mail1, $mail_title . ' ' . date('d-m-Y H:i:s'), $mail, $headers);
mail($mail2, $mail_title . ' ' . date('d-m-Y H:i:s'), $mail, $headers);

1. Окружность большого диаметра - большой div, большой border-radius, тонкий border.
2. Пункты меню расположены абсолютным позиционированием один поверх другого, затем с помощью transform: rotate подвинуты в нужные положения (как в этом примере, только углы меньше).
3. Затемнение сверху и снизу - это линейный градиент поверх всего этого, в центре он прозрачный, по краям - видимо синий.
4. Центральный (активный) элемент меню при попадании в центр изменяется - из точки увеличивается с помощью transform: scale иконка, а вокруг нее делается что-то такое.
5. Соответственно остается прикрутить js-логику: считать углы в зависимости от количества элементов, все это поворачивать (при переходе к новому пункту меню), добавить поддержку клавиатуры (и видимо мышки, чтобы меню проворачивать колесиком) и адаптивность (на маленьких экранах можно всю эту красоту спрятать и оставить пункты меню в столбик).

Что могу сказать, плохо пробовали.
через маргины
через flex
через text-align
через position: relative

И есть еще целая куча способов, как это можно сделать.

https://owlcarousel2.github.io/OwlCarousel2/docs/a...

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

А че делать будете? Зависит от заказчика и того где будете работать дальше.
Встречал много вакансий, где было обязательно знание bootstrap(и т.п).
Не встречал, чтобы говорил, что верстаю, преимущественно, с bootstrap и мне отвечали, "ну неееет, так мы не работаем", может, я и мало встречал.
Это знание тебе не повредит.
Офф документация у них в порядке. Наглядно.