WapSter

Уверен что не появляется? https://jsfiddle.net/znsykacm/ загляни в консоль

Обычные табы https://medium.com/@wangel13/pure-javascript-tabs-...
Еще можно путем подмены контента.

Немного не ясно, что именно хотите сделать. Но если просто убрать видимость фокуса то можно обойтись и css

*:focus {
// тут обнулите стили для фокуса
}

Но это плохая практика, и если спросят кто научил, молчите)

В чем сложность то? по хорошему стоит в обертку текст и иконку запихать, и ее уже позиционировать, код мне править лень думаю понятно сказал.

<style>
                tspan { white-space:pre }
                .shp0 { fill: #ffffff } 
            </style>

.shp0 { fill: #ffffff } убери

$('.col-md-3') - вот это очень плохая реализация, не стоит использовать классы bootstrap для подобных манипуляций, допиши свой селектор при необходимости используй !important к нему.

Пустой блок внизу, костыль но сработает. Отрицательный марджин на высоту меню. Меню сделать относительно позиционированным.

Для css и js в пути файла можно подставлять версию после знака "?" <script src="/js/main.js?123456789"></script>

Картинки и так обновляются, если название отличное.

PS. Для body overflow: hidden; не желательно добавлять, либо на отдельный класс для body или создавать обертку.

https://bennettfeely.com/clippy/ и почитать о свойстве clip-path

Первый вариант) И это изобретение велосипеда БЭМ)
UPD посмотрел на коммент Евгений и не могу не согласится с ним, но с оговоркой. Если вы не крупный разработчик, а просто версатальщик, разделять по папкам просто ресурсы по типу. В крупных проектах используется первый вариант, ваш второй вариант не нужно разделять по блокам вообще. В js фреймворках и так все логично делится, и не нужно ничего придумывать.

Примерно так

Уже отвечал на подобный вопрос Как сверстать такой блок?

* {
    box-sizing: border-box;
}

.popup__conversion__inner {
   background-color: #fff;
}

Убери вот эту шляпу type="text\css"

body {

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}

section {
  max-width: 600px;
  width: 100%;
  background: red;
  min-height: 200px;
}

<p style="color: green;">text</p>

lazy load + низковесный плейсхолдер