Я бы посоветовал двигаться шагами, которые закрепляют одну (максимум две) технологии. Но это больше вопрос психологической нагрузки — проще, когда ты используешь в 40% случаев незнакомую технологию, когда остальные 60% являются технологиями, в которых Вы уже имеете опыт.
В принципе, можете использовать такую последовательность действий:
1) Напишите небольшой лендинг (2 экрана, думаю, будет достаточно), используя Bootstrap. Если Вы раньше с ним не работали, то добавлю, что у Bootstrap, если брать в общем, есть 2 функции — структура блоков на сайте (с обеспечением адаптивности) и готовые элементы интерфейса. То есть, для сайта с нестандартной модульной сеткой и прорисованными дизайнером лучше написать несколько лишних строчек CSS, а для лендингов Bootstrap в самый раз.
2) Установите git. Создайте пустой проект, чтобы просто "пощупать", а потом создайте новый проект на основе лендинга. Разберитесь с основными терминами git и поработайте с сервером (можете использовать BitBucket), почитайте о gitHub, внесите какие-либо изменения в проект и добавьте их в git
3) Установите SASS (перед этим Ruby). Перепишите весь css-код в соответствии с возможностями sass. Если в документации SASS есть описание возможностей, которых нет в лендинге, добавьте новый блок, чтобы попрактиковаться с некой конкретной возможностью. Я почитал в ответах, что также советовали попробовать less и Stylus. По Stylus не скажу, так как с ним не работал, а less, как по мне, не стоит — у него меньший функционал, да и по популярности он намного ниже, потому сложнее будет искать ответы на вопросы.
4) Автоматизируйте процессы, используя gulp (можно просто пройтись по документации, чтобы иметь список действий, можно почитать инструкцию в Интернете)
По ощущениям, этот список для изучения примерно на сутки, но может Вы растянете, а может за 8 часов, к примеру, разберетесь. В любом случае, желаю успехов в изучении!
