Даниил Маслов

на youtube

Нет конечно. Доверяйте официальной документации.

function getClickFunction(elementId) {
  return () => document.getElementById(elementId).style.display = "block";
}
link.onclick = getClickFunction('modal');
link2.onclick = getClickFunction('modal2');

Простой и короткий вариант
https://codepen.io/hisbvdis/pen/abodJXQ

node.js посмотри обязательно, если действительно понимаешь перечисленное в посте, то будет не очень сложно накидать свой работающий мини-проект

Если так как описано, то достаточно. Но добавил бы туда webpack и базу по какому либо фреймворку без них сейчас практически никуда, при желании можно освоить все за неделю 2, на месте работы будет достаточно практики, чтобы углубиться. И гит обязателен для понимания и работы с ним.

Гитхаб пейджес предназначен для статических сайтов без бекенда

Правильнее будет сказать не по типу, а по атрибуту))

document.querySelectorAll('[type="email"]')
document.querySelectorAll('[type="text"]')
document.querySelectorAll('[type="tel"]')
// и т.п.

фигурных скобок не хватает, неужели редактор кода не подсвечивает?

UPD 24.08.2022
1) Выберите в левой панели раздел "Расширения" и "Отображать встроенные расширения"


2) Найдите расширение Git и нажмите "Отключить"

Начиная с левого верхнего угла задается закругление блока.
Значения, заданные через /, определяют горизонтальные и вертикальные радиусы. Свойство не наследуется.
Тут подробно описано - https://html5book.ru/css3-borders/

https://jsfiddle.net/zw4k6vsu/

.one path {
  fill: #909090;
}
.one.active path {
  fill: #f00;
}

const itemSelector = '.one';
const activeClass = 'active';

document.addEventListener('click', ({ target: t }) =>
  (t = t.closest(itemSelector)) && t.classList.toggle(activeClass)
);

// или

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => e.currentTarget.classList.toggle(activeClass));