Алекс Глебов

Ключевые навыки верстальщика это скорость верстки, соответствие макету, адаптивность, подключение и настройка плагинов jquery, анимации и эффекты.
Именно их нужно подтягивать в первую очередь. Про все остальное можно было бы сказать "на работе научат", но не в вашем случае) и в каждой конторе используют свой набор плюшек.

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

Цель к которой вы хотите прийти какая?
Если веб студий в городе нет, то остается фриланс..
Можно искать заказы по верстке, начинать с одностраничников, где не нужны препроцессоры и оптимизаторы, и постепенно увеличивать навыки.
Главное все делать качественно, чтобы были постоянные клиенты.

<div style="background-image: url('/img/bg.jpg');"></div>

вся динамика делается на js

https://www.ozon.ru/context/detail/id/31057355/ - основы js
числа считать ничего сложного нет
блоки раскрываются на jquery https://jsfiddle.net/4wgnnax1/

section.first{
height:100vh;
min-height:600px;
}

https://htmlacademy.ru/courses/45

var options = {
            offset: '#showHere',
            offsetSide: 'top',
            classes: {
                clone:   'banner--clone',
                stick:   'banner--stick',
                unstick: 'banner--unstick'
            }
        };       
        var banner = new Headhesive('.banner', options); //.banner заменить на свой блок с хедером

в html в место где должен появляться баннер вставить:
<a id="showHere"></a>

Бывает что код библиотеки нужно заменить новой версией. И все твои правки полетят..

1) быстрый комп с кучей оперативки и ssd
2) плагины для ФШ pnghat и csshat
3) ide с emmnet. я сам начинал с нотпада, но после работы в нормальной среде разработки он кажется жутко неудобным.
4) grunt - делает массу нужных вещей. одно автосоздание спрайтов чего стоит..

А зачем он? Он совсем не поддается стилизации. Спойлер на jquery занимает 5 строчек кода и полностью подстраивается под дизайн.