How do you eat a hat? You could either start with the tastiest part first or try to tackle some of the worst ones. You could also taste each part and go from there. I think the same applies to front-end.

One Part at a Time

One option is that you pick a part of it you find truly interesting and learn it really well. This can be something like styling. Once you are confident with it, you can move onto the next topic.

My key point here is that trying to learn it all at once can become overwhelming quite fast. It's easier to learn when you have something to support you as that will make it easier to tell what's going on.

Tasting Multiple Parts

If you are unsure of what to learn, you could taste multiple technologies. Thanks to your existing JavaScript knowledge you should be able to understand the basic ideas of certain frameworks and libraries fairly fast. Spend an hour or two on each and make sure you see what makes them tick. You'll begin to see commonalities but also parts where they differ.

This process will help you to figure out which technology resonates with you and guide your learning efforts. Sometimes learning something not that interesting or popular can be a good idea too. It is a good idea to know what's available even if you don't know it all in detail. The information can come in handy later on as you need to make decisions.

Conclusion

It's very good you are comfortable with JavaScript already. I believe that will give you a nice head start as you don't need to fight with both learning the language and learning some specific technology at the same time.

There is no one right strategy. Often working towards a concrete goal (say specific app) can be a nice way to motivate learning. That will force you to figure out how to get it done.