SagePtr

Корень www-сервера разве совпадает с корнем проекта?

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

При декларативном подходе (CSS) мы говорим браузеру, что именно сделать, а он уже сам решит, как именно сделать это оптимально для себя и для устройства, на котором он работает. При императивном подходе (JS) мы контролируем каждый шаг и не даём свободы, браузер вынужден делать то, что автор скрипта скажет, даже если ту же самую задачу он может решить лучше и оптимальнее него.

В браузере можно нажать F12 и посмотреть на вкладке Console, на что конкретно ругается. Вангую, что на пути к некоторым файлам. Смотрите в коде и правьте.

Если оба элемента вписаны в общий родительский элемент, то можно при наведении на этот элемент менять оба дочерних элемента

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

Вы для людей делаете страницу, а не для PageSpeed. Если у реального посетителя 12кб грузятся больше секунды - то он на любом сайте заметит притормаживание интернета, а не только на вашем.

Потому что Safari - экскременты. Худший браузер из худших. Можно сравнить его с Internet Explorer, только вот юзер древней винды может поставить другой браузер и отказаться от IE целиком, а юзер iOS прибит гвоздями к этому Сафари и даже обновить его не может по своей воле (если Apple решила, что для данного устройства обнов больше не будет), ни заменить на другой браузер (ибо такая политика AppStore)

Скажем так: если эта функция у вас критически влияет на функционал - то использовать не стоит. Но если незначительно влияет только на внешний вид, и без неё слегка шрифт будет не того размера - то можно использовать, только проверьте сперва на неподдерживаемом браузере, как оно смотреться будет.

Вероятнее всего, giphy их конвертирует в видеофайлы для экономии трафика, потому конвертированные файлы будут весить примерно в 8-10 раз меньше, но при этом будут выглядеть смазанными, если исходные гифки были слишком зернистые.

Кратко: видеоуроки - гавно. Развёрнуто: блогеры это по сути клоуны, а клоуны редко умеют в программирование и вёрстку, чаще всего понахватались каких-то простеньких вещей, которые у них сработали, и пытаются других поучать, не понимая, как эти вещи на самом деле работают, по какой причине могут не работать, какие таят в себе опасности и подводные камни.

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

Если на PNGшку с прозрачным фоном, то filter: drop-shadow

Коли в вопросе не уточняется, что ошибок в консоли нет - нажмите в браузере F12 и смотрите, есть ли какие-нибудь ошибки. Если есть - исправляйте до тех пор, пока их не останется.

А в чём проблема-то? Круг можно легко сделать в виде квадратного div с border-radius: 50%.
Расположить кучу дивов в виде таблицы 7х3 можно тоже разными способами - обычными блоками с display: inline-block, флексами, гридами... На худой конец, таблицей (но много лишнего кода так будет).