Почему не добавляется класс? Где ошибка?

DggMMmmm, о, ура, отлично!

Почему не добавляется класс? Где ошибка?

DggMMmmm, мой ответ по ссылке выше начинается со слов о том, что в инпуте забыл атрибут placeholder.
А он должен быть, чтобы работал :placeholder-shown. Хотя бы с неразрывным пробелом внутри.
А ещё лучше с нормальным текстом, просто прозрачным.

Почему не работает команда npm start?

Node.js установлен?

Почему не добавляется класс? Где ошибка?

DggMMmmm, я в прошлый раз писала вам про псевдокласс :focus-within, который заменит вам этот js. И вы вроде согласились.
Поэтому, чтобы как-то нормально вам помогать, нужно понимать чем решение на css не подходит.

Почему не добавляется класс? Где ошибка?

Смотрите, в вашей песочнице всё работает
https://codepen.io/AnnaSummer/pen/WNaRXgR
Я лишь добавила обводку, чтобы это было очевидно.

А есть какое-то объяснение, зачем всё таки вы это делаете на js, а не используете css?
Вам же что-то типа этого нужно https://qna.habr.com/q/1272730#answer_2319398?

Как сделать отзывчиво-адаптивную вёрстку?

CyberStoic, по-моему, статьи про гриды и флексы есть на каждом более или менее крупном ресурсе про верстку.
Флексы:
https://yoksel.github.io/flex-cheatsheet/
css.yoksel.ru/flexbox
https://tproger.ru/translations/how-css-flexbox-works/
html5book.ru/css3-flexbox
Гриды:
https://yoksel.github.io/grid-cheatsheet/
https://css-live.ru/css/bolshaya-statya-pro-gridy-...
и т.д.

Игра по флексам https://flexboxfroggy.com/#ru
По гридам https://cssgridgarden.com/#ru

хочу понять реализацию без фреймворков и готовых сеток

Ну вот, изучайте возможности флексов и гридов и пишите именно те стили, которые нужны для каждого конкретного случая. Пробуйте разные варианты, смотрите какой оптимальнее (меньше кода или легче управляется или по какому-то ещё параметру).

Как сделать отзывчиво-адаптивную вёрстку?

В примере просто меняется ширина дочерних элементов на разных вьюпортах.

Можно сделать на гридах в одну строчку используя repeat и minmax.

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

Вы вроде бы показали вполне конкретный пример, который можно изучить.

Обычно в таких макетах две проблемы:
- сам дизайн не очень готовый к такому поведению
- непонимание геометрии верстальщиком/дизайнером/заказчиком

Как сделать такую точке перед текстом в CSS с помощью after/before?

Прямо так и сделать, писать подряд что вам нужно, скругление, зелененький и т.д.

::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0.8em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: green;
}

Как залить изменения в определеную папку на GitHub?

В какой папке были изменения в такую и зальются.

Сделать логотип выходящий за пределы header?

typ6alet,

.site-branding a.brand img.svg-logo-image {
width: 264px;
position: absolute;
}

1. Это ужасный селектор.
2. Вы так вынете картинку из ссылки. А подвинуть, наверное, надо всю конструкцию целиком.
.brand {абсолют и т.д.} или .site-branding - мы не знаем что в разметке.
3. Забыли координаты для позиционирования.
4. В media зачем-то переопределяете абсолют на абсолют
5. Если вы пишете сначала madia, а потом основные свойства, то они и переопределяют то, что выше.
6. Зачем два селектора для, по всей видимости, одного элемента .site-branding a.brand img.svg-logo-image и .site-branding a.brand img

Сделать логотип выходящий за пределы header?

typ6alet, какая разница Вордпресс это или нет? Меняйте CSS как вам нужно.

Сделать логотип выходящий за пределы header?

absolute
transform
margin

Резиновая верстка - как сделать так, чтобы на 1400px сайт выглядил так же, как и на 1920px?

Использовать vw.
Можно вместе с min, max или clamp

Как перенести блок?

Нормально: на гридах. И да, с @media.

Не очень нормально:
- float
- absolute
- flex + js

- может с использованием сетки (24 колонки)?

Неожиданная идея )))
А если 24 не поможет, то 512?

Почему у меня не добавляется класс, че я не делаю правильно?

Может быть вы просто будете использовать CSS и псевдокласс :focus-within?
Жить будет заметно проще.

Если это, конечно, не тренировочное задание.

--
А так, судя по коду должно всё нормально срабатывать. Правда убираться не будет.
Выложите пример на codepen.io

Как сделать overflow hidden для body по нажатию?

Сделать класс с overflow и его toggle.

p.s. кнопки это тег <button>, а не <div>

p.p.s. следующим будет вопрос "не работает overflow на body для мобилок" -> гуглится.

Как убрать автоматическое увеличение высоты ROW элемента в grid относительно другого row?

1. Открывать абсолютом поверх следующих пунктов
2. Не использовать гриды
3. JS
4. Изменить разметку (JS или ручками)

Вообще, за это отвечает align-items, но в этом случае не поможет, потому что будет пустое место, вместо растяжения, т.е. шило на мыло.

Как поменять картинки при клике на кнопку?

https://learn.javascript.ru/dom-navigation#sosedi-...

Тег < p > и < span >. Есть разница?

Кирилл Гусарев, читать про параграфы и что под этим словом понимается в верстке

Как задавать значения width и height изображениям при адаптивной верстке?

https://caniuse.com/?search=aspect-ratio
И это заодно https://developer.mozilla.org/ru/docs/Web/CSS/obje... вместо абсолютов.
Гриды, кстати, тоже уже выдуманы.

Но в вопросе-то нужно сохранение родных пропорций, а не та история, которую рассказываете.