Ankhena

Нужно, чтобы элемент с sticky-top был непосредственным потомком скроллируемого контейнера (скорее всего, это у вас body).

1. Примерно так

2. after,before

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

В твоем случае будет типа такого


Получившуюся картинку уже можно будет использовать для border-image

1) Создаете элемент для полоски, делаете ему абсолютное позиционирование, и transition на left и width
2) Вешаете на каждый пункт меню событие mouseenter
3) По выполнению события mouseenter, берете у текущего элемента позицию относительно родителя, и ширину
4) Назначаете полоске полученную позицию и ширину
5) Вешаете mouseleave на блок с меню
6) По выполнению mouseenter делаете переход полоски к активному пункту меню (или первому).
UPD: вот так на jQuery будет https://jsfiddle.net/Vlad_IT/8zj2x17L/

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

Все платежки, которые я знаю работают по такому принципу:
- выдаются 2 ключа
- туда отправляете данные -- одним кодируете
- полученные данные вторым раскодируете
- в полученных данных есть номер заказа

Второе: очистка корзины
Очищайте корзину сразу после принятия заказа и записывайте заказ в заказы (что логично)
А оплачен заказ или нет -- другая история, у пользователя в случае ошибки оплаты просто будет не оплаченный заказ
Если нужно что-то напомнить -- напоминайте. У вас, мол, не оплачен заказ, оплатите, пока есть на месте товары

1. Выделить в макете символ иконки
2. Скопировать иконку
3. Открыть в браузере https://fontawesome.com/cheatsheet
4. Нажать сочетание клавиш Ctrl+F
5. Вставить в поле поиска
Если иконка из данного шрифта, она будет найдена в этой таблице

В sass на самом деле не переменные, а больше константы. При компиляции в css, они будут заменены на обычные значения, как если бы вы их ввели руками. Другое дело, переменные css. Их можно легко менять через js

Вот у меня примерчик с другого вопроса завалялся https://jsfiddle.net/Vlad_IT/5pyn2Lo9/

Волшебные константы

но разброс советом просто колоссальный

Тут будет еще колоссальнее.

инструментов для разработки

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

если смотреть на hh по объявлениям.

Вакансии по чистой верстке не такие объемные по требованиям. Но часто требуют JS, сейчас без него никуда.

Сейчас задалась вопросом как писать и делать проекты, поспрашивала у знакомых

Прошлогодний ответ, но все еще актуальный Верстка с нуля: какие основные этапы работы?

Кто-то советуют делать адаптивные сетки самостоятельно сливая вместе флексы и гриды и писать на ванильном css без фреймворков, много советуют фреймворк smartgrid, пара используют bootstrap и плюют на все остальное считая это лишними усилиями.

При хороших знаниях css, в особенности flex и grid, вам не нужно будет использовать всякие фреймворки. Никогда не любил их использовать, всегда одинаково по времени разработка занимала как с css фреймворками, так и без. Но вы должны ориентироваться на себя. Попробовать стоит и так и так, но на начальных этапах советую делать упор на чисты css, чтобы лучше понимать, как это работает. Фреймворки лишь обертки.

И понять, кто прав и кому верить я не смогла

Тут будет также. Единственный выход, послушать всех, попробовать самой и принять решение.

Но хочу сразу идти в правильную сторону зацепляя меньше граблей.

Грабли, как и ошибки, довольно полезная вещь в изучении. Помогает оценить, почему так ошибся, как сделать так, чтобы больше так не ошибаться.

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

Учите чистый css, html и js, по мере работы будете понимать, какие инструменты вам необходимы, чтобы облегчить/ускорить разработку. Закидаете себя сейчас инструментами - перегорите и бросите.

https://jsfiddle.net/ozrq6dn8/
Как-то так...

Если img превышает высоту родительского блока, то блок увеличивается.

Если кому понадобится.
Всем блокам кроме первого ставим:

border-right: 1px solid #E3E3E3;
border-left: 1px solid #E3E3E3;
border-bottom: 1px solid #E3E3E3;

А первому даем значение в стиле:
border-top: 1px solid #E3E3E3;
Сори, за кликбейт.