Как задать класс active первому элементу по умолчанию?

При попытке добавить active в верстку, разумеется этот класс автоматом присваивается ко всем элементам.

Это "разумеется" лишь потому что это у вас так сделано. А не потому что так всегда.
И я бы, пожалуй, голосовала за то, чтобы это было проделано как бэке, а не потом js'ом на клиенте.

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

Rimidbit, да ))) В вопросе правильный код, а в песочнице уже нет :)

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

Сложно сказать.
У нас работает.

Сделайте песочницу с видимой проблемой на codepen.io

Как оформлять такое для широформатных мониторов?

- Фиксировать ширину и делать поля
- Показывать больше кадров
- Масштабировать
- Перестроить карточку: фото и рядом текст

Можете придумать что-то ещё.
Если не можете, идите к дизайнеру.

Или наоборот, если дизайнер на связи, то начните с него.

Как лучше позиционировать картинки абсолютом или флексами?

Это вообще фон.
Зачем вам тут абсолюты или флексы.
Но вообще, лучше гридами )) Если бы они не были декорами, которые легко ставятся обычным bg.

Почему текст 3 отобразился так низко?

Не бывает такой структуры заголовков. По логике.

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

Как сделать grid сетку с разной шириной колонок в каждой строке?

tostershmoster, тогда тоже без разницы, флекс или грид. Я бы выбрала грид.

Как запретить инвертирование цвета при темной теме браузера?

Если совсем не получится, можно сделать прозрачными, а вниз черную подложку через bg или bg родителя.

Как установить GitHub Desktop на диск D?

MANCHERA CHAN, графический интерфейс для работы с гитом, если нет встроенного в ваш редактор.

Как установить GitHub Desktop на диск D?

да , мне нужно установить github for desktop, официально возможности установить на не системный диск нет

Может быть воспользоваться плагинчиком для своего редактора кода? И ведь удобнее, когда всё в одном месте.

Как сделать grid сетку с разной шириной колонок в каждой строке?

Антон Антон, ну тут без разницы флекс или грид.

Именованные области тут не нужны и создавать каждому по классу тоже не нужно.

Достаточно задать класс тем элементам, которые должны занять по 2 колонки и прописать им
grid-column: span 2;

Сам грид можно сделать каким-то таким (буду считать, что gap = 20)
1fr 166px 1fr
или 547fx 1fr 547px
или вычислить пропорции и написать в fr все три столбца (пожалуй, лучший вариант для адаптива или чтобы обезопасить себя от желания клиента изменить ширину контейнера).

grid-template-rows вообще не нужно писать, высота контента в любой момент может измениться

Также это можно сделать и флексами. (Только не двумя как в ответе Антон Антон, а одним).

Какой вариант выбрать может зависеть от адаптива. Просто, чтобы поменьше писать при перестроении.

Как убрать отступы у сайта сверху справа и слева?

Михаил Лялин, мне, если честно, надоело отвечать на этот вопрос в 100500 раз. Поищите по ответам и комментариям, если действительно интересно.

Грубо говоря: так делать не нужно, потому что рано.
Потому что потом придется переопределять обратно, вместо того, чтобы сразу и одни раз задать нужные отступы.
Потому что при добавлении нового блока без дополнительного класса, в всё слипнется.
И т.д.

Как растянуть фон цифры на весь item?

frontAng, медленно: отмените центрирование для номеров.
https://developer.mozilla.org/ru/docs/Web/CSS/alig...

Как растянуть фон цифры на весь item?

frontAng, тогда нужно определиться:
- нужно центрировать
- нужно на всю высоту

Как растянуть фон цифры на весь item?

1. Используйте для номеров <ol> и псевдоэлементы с counter. Это семантичнее.
2. Стилизуйте как хотите.

Как растянуть фон цифры на весь item?

Не центрируйте элемент.

Как убрать отступы у сайта сверху справа и слева?

Поддерживаю Виталия

Как убрать отступы у сайта сверху справа и слева?

Нужно:
1. Открыть инструменты разработчика.
2. Выяснить откуда отступы.
3. Убрать их.

Если вы пришли на Тостер, чтобы узнать, что у body есть отступы по умолчанию, то это беда.

С чего начать изучение верстки?

но с каждым следующим своим шагом понимаю, что еще толком ничего не знаю

Это и не изменится, если будете продолжать изучение и развитие. Читайте мудрецов.

потому что элементарно не понимаю порядок действий по верстке сайта

Варианты могут быть разными.
Самый банальный: сверху вниз.
Можно от крупных блоков к мелким.
Можно от простых к сложным.
Можно соорудить свою удобную вам систему.

и с большим количеством практики

Телеграм-каналов с макетами сейчас сколько душа пожелает. Берете и верстаете. Пару десятков сверстаете - немного полегчает.

С чего начать изучение верстки?

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

Почему объект не располагается горизонтально?

Какой объект? И что значит "объект располагается горизонтально"?

Если речь про список, то да, по умолчанию он располагается вертикально.
Чтобы он стал горизонтальным, нужно ему что-нибудь такое задать. Флексы, гриды, инлайн-блоки и т.д.