WQP

Странно, но у меня не дёргается. Попробуйте использовать префиксы

-webkit-transition:
-moz-transition:
-o-transition:
transition:

Первый блок: голубой фон + в :after ставишь треугольник position absolute, bottom выставляешь как надо и right 0px;
Второй блок: оранжевый фон.

Менять слайды нужно будет через width в процентах с overflow-x: hidden;

-------------
То что выше для слайдера картинок и т.д. Если вы используете https://jqueryui.com/slider/ то так и пишите. То что выше не подойдёт, а Slider UI редактируется и так через CSS

Добавляйте before и его растягивайте по весь блок

Используйте Bootstrap 4. Он на flex. Там выровнять легко и без костылей

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

Всегда работаю параллельно. Открыт макет в ps и в редактор поделён на две части. И начинаю блок за блоком верстать, но перед этим прохожу по всем макетам и смотрю что и где повторяется, чтобы не делать ещё один велосипед

.navbar-brand {
    padding: 0;
    margin-left: 0!important;
    height: auto;
}

Для знака $
.amount:first-letter { ... }

Для последних цифр нужно либо прогонять через JS для добавления тегов, либо оставлять как есть

Ищите canvas js

При самом маленьком экране на картинки поставьте max-width: 100%

как сделать бордеры при наведении что бы они перекрывали бордеры основного блока.

Можно с помощью after и before это сделать, без jQuery

И ещё может кто знает как сделать эффект :hover как бы скользящим?

Как я понял при наведении вам надо плавно перемещать border. Для этого на событие hover надо поставить обработчик который будет двигать блок с полосками (нужно будет вычислить координаты блока).

Через nth-child(...) ставьте анимацию

preventDefault(); не добавляет в адресную строку ничего. Используйте его