1. Каким образом лучше и продуктивнее продвигаться в освоении? Сидеть за книгами или верстать из шаблонов все подряд поглядывая в htmlbook или гулять по ютубу в поисках видео?

Да! Много верстать

2. Есть какой-либо смысл покупать "индивидуальные курсы"?

на htmlacademy хорошие курсы. Там есть бесплатные уроки, а потом платные. Посмотрите, может вам понравится бесплатные и вы захотите платные купить, там все интерактивненько и интересненько. Мне лично бесплатных хватило, просто так, для интереса)

3. Конечно же советы от себя.

Вы сами выберете себе удобную дорогу в изучении. Вы на верном пути, вам просто надо много верстать, и если у вас появится затык - добро пожаловать сюда, в гугыл, на sstackoverflow, не один вы сталкивались с разными проблемами :)
Очень хороший был совет выше по поводу бутстрапа - этой очень хороший инструмент, но он подходит не для всех проектов. Не пихайте его везде где только можно. С препроцессорами все так же - только когда поймете, что css у вас прям получается огонь, то начинайте пользоваться препроцессором - супер штука, там много мозгов не надо будет, чтобы разобраться.

Совет № 1 - не бойтесь пользоваться новыми штуками, но все с умом.
Совет № 2 - найдите наставника. Иногда помощь человека соображающего очень нужна. Он и ревью сможет сделать, и тукнуть чо почитать надо, где потренироваться, а то и пендаля даст. Главное - не задалбывать.

Удачи вам!

Не на codepen, но типа таво. Это один из многих вариантов верстки такого блока
Тыц

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