Ankhena

1. Градиент:
ценная статья https://html5book.ru/css3-gradient/
генератор: www.colorzilla.com/gradient-editor
Сам градиент нужно задать фоном к псевдоэлементу, который будет показываться при :hover на сам блок.
Поскольку градиент полупрозрачный, то цвета можно задавать в формате rgba или использовать opacity.

2. Меню с соц.сетями:
Сами ссылки: собственно <a> с заданными размерами и соответствующей картинкой в фоне, либо svg (svg лучше спрайтом). Смотря, что у вас в исходнике.
Обернуть ссылки можно в div или в список ul.

Делайте свой код в песочнице - посмотрим.

Завязывайте с флоатами. Верстайте с помощью flex. По дороге изучайте гриды.

1. Итак,

display:flex;
justify-content: space-between;

https://html5book.ru/css3-flexbox/
2.
justify-content: space-between;
3.
align-items: center;
4. эмммм... border-color? В чем сложность?
Можно псевдоэлементом еще, если полоска уже, чем текст.

ionden.com/a/plugins/ion.rangeSlider

Префиксы надо ставить автопрефиксером, а не колорзиллой. https://autoprefixer.github.io/ru/

Еще бы у вас пример кода соответствовал вопросу, было бы круто.
Зачем вы используете order я не знаю, если перестать его использовать, то код можно оптимизировать.
https://codepen.io/anon/pen/ZrxBgZ?editors=1100

Можно ли сделать так что бы hover эффект срабатывал только если навести на ссылку в теге "a"но не на тег "ul " ?

Да, можно. Он и сейчас срабатывает не на ul, а на li. А кажется вам, что на ul, потому что наведение на псевдоэлемент считается наведением и на родителя тоже, что логично.

Если надо при наведении на a, то и перепишите это .nav-btn .nav li:before и .nav-btn .nav li:hover:before с li на a.
Чтобы не срабатывало при наведении на before задайте ему pointer-events: none;.

https://jsfiddle.net/Ankhena/Lqsftvxd/

div {
  position: relative;
  width: 80%;
  height: 200px;
  margin: auto;
  background: linear-gradient(to bottom, yellow, orange);
}

div::before,
div::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 50px;
}

div::before {
  background: linear-gradient(to right top, #00f 49.3%, transparent 50.8%);
}

div::after {
  right: 0;
  background: linear-gradient(to left top, #00f 49.3%, transparent 50.8%);
}

Без дополнительных блоков и псевдоэлементов: https://jsfiddle.net/Ankhena/omuc1b0u/

p.s прошу совета людей кто реально сталкивался с этой проблемой и как её решали

Довольно долго так верстала.

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



А нормальное решение одно: купить монитор получше и оставить старый вторым. С двумя мониторами работать значительно удобнее.