Learn by doing
If you're brand new to the language (welcome!) start here: http://jsforcats.com/ (Silly name, but excellent content)
If you've already got a little bit of coding under your belt, the absolute best place / way to learn is with https://nodeschool.io workshops (Full disclosure; I've written 2 of them)
They're all free open source at your own pace workshops where you are given a bit of info, a task, and you must code it up before you can move on (it runs unit tests over your code to verify you completed it)
Learn by reading
For those more interested in reading books, the top two picks are (both free online):
- Eloquent JS: http://eloquentjavascript.net
- YDKJS (You Don't Know JavaScript): https://github.com/getify/You-Dont-Know-JS
Learn by watching
A more visual person? These video courses have been highly recommended to me by my peers (although I've not done any of them myself, so YMMV):
- https://egghead.io - many authors post succinct and high quality videos on a range of
- https://frontendmasters.com - the author of YDKJS also teaches there (@getify)
- https://frontend.center/ - still new, but is great to help you stick with it thanks to their regular video releases
JS in the browser
To build great code bases that power great user experiences in the browser, you'll want to understand the modern frontend tooling stack, and what each piece does for you:
- Babel to convert latest-JS to can-run-in-browsers-JS
- Webpack or SystemJS or Browserify or Rollup to convert runs-in-node-JS to runs-in-browser-JS (by bundling many small modules together)
- PostCSS to convert latest-CSS to can-run-in-browsers-CSS
- React or Angular 2 (not 1.x) or Vue.js to manage the UI layer
- Redux or RxJS or MobX to manage the data layer
- Node to manage the server layer
(Any combination of the above tools is fine. You'll encounter folks who prefer some over others, etc, but the important part is that you pick one set. As a starter, try; Babel + Webpack + PostCSS + React + Redux)
Motivation
There's a lot written about "JavaScript fatigue" (the feeling that "whoa, there's too many things I have to learn, and always new stuff coming out, what one do I choose!?"), and it can be really demotivating if you let the FOMO (Fear Of Missing Out) get the better of you. Instead; pick one set of tools and learn them really well. If, once you've got a decent handle on them, they don't seem to be solving the problems you have, see if you can enhance them in some way (eg; find already written react components, or PostCSS plugins, or Babel transforms, etc), and if it's still not meeting your needs, then think about finding another tool which does.
It's also helpful to meet people IRL (In Real Life) to keep up the motivation. There are loads of Meetups / Conferences / Workshops / Social Groups (many free, some paid) all around the world from California to Sydney to Tel Aviv to Vienna. Search "Javascript" on https://www.meetup.com to find a group. (Full disclosure; I run 2 free meetups in Sydney, Australia)