По поводу препроцессоров: они всего лишь инструменты, которые делают процесс верстки более удобным. Переходите к ним, когда чувствуете, что в этом есть необходимость. Когда вы уже освоили блочную верстку на HTML и CSS, и перед вами стоит задача ускорить процесс верстки, автоматизировать некоторые действия. В этом случае препроцессоры достаточно облегчат вашу работу.
К JavaScript нужно преступить тогда, когда вы сталкиваетесь с более сложными макетами. Макеты, где нужно реализовать какую-то логику. Например, когда в макете присутствуют калькуляторы, слайдеры, галереи и другие динамические элементы.