ildar-meyker

У вас же есть пример. Осталось только изучить, как оно работает.

Откровения приходят с опытом. Для начала сделайте как можете. Со временем вы начнете понимать, как можно сделать лучше.

Почему вы решили, что один файл js будет выдавать ошибки? Вы можете инициализировать функционал только тогда, когда есть соответствующие элементы на странице.

Обычно ресурсы складывают в папку /src, /source, а результат билда складывают в /build, /public.

Разумнее всего вывести группами и потом сместить каждое трасформациями.

В данном конкретном случае вы можете перекрыть изображение svg файлом, если хотите четких границ. Или даже обойтись простой png- шкой высокого разрешения.

Просветление обычно приходит через 2 дня.
https://codepen.io/ildar-meyker/pen/WNoeLBx

Суть примерно такая же. https://codepen.io/ildar-meyker/pen/pooBZpQ

https://www.w3schools.com/jsref/prop_text_defaultv...

Я бы не стал использовать блоки advantages и advantage. Если уж сильно нужно 2 блока, можно было бы придумать другие имена, чтобы они не были так похожи. В данном конкретном случае вполне достаточно одного пространства.

В верстке нет понятия правильно, решений может быть много. Если не заморачиваться, вполне можно циферблат картинкой, а стрелку вращать через трансформации.

Средний человек не в состоянии в уме воспроизвести ваш код. Ему нужно все подключить и посмотреть. Почему это должен сделать он, а не вы?

Посмотрите как это реализовано на https://vk.com/ при редактировании аватарки. Там два слоя изображений, и миниатюра создается за счет позиционирования верхнего слоя.