Level 0:

You need to learn HTML. Like don’t learn it just know how to use https://www.w3schools.com as a reference. You will learn it while you use it.

Then once you know how to put content on your browser, learn to make that beautiful. Again don’t mug it up just learn while doing.

Then comes JavaScript. [OK… One thing. People would say start with JavaScript but I would suggest starting with the latest version of ECMAScript. No confusing bindings or prototype salad with ES2016+]. Basically I would recommend not to start with jQuery at this moment but first get your hands dirty with VanillaJS (Plain old simple JavaScript).

Once you are comfortable with opening a code editor, browser and displaying your code in the browser, build a very small project… A really tiny project. (Replicate this if you wish: https://jazzyarchitects.github.io/NumberGuess/)

Level 1:

Now increase your learning rate and start either with AngularJS or ReactJS. Choose any one and stick to it for a while. This could take a while to learn and would also require more effort but it is worth it.

Once you start with React or Angular you will start using lots of libraries. So for managing these libraries start learning yarn. Not NPM or BOWER but YARN.

Also get your hands dirty with SASS or LESS. It is optional but will help in long run.

Level 2:

With all the libraries and optimizations you wish to include in your web page you would require the power of automation. Start GruntJS or GulpJS.

Level 3+ (If you still have motivation to learn):

With level 2 completed you can successfully build a website front end using the latest technology trends. But for getting a step ahead learn TypeScript and BabelJS. Get familiar with RequireJS or WebPacks. Migrate from ReactJS to InfernoJS (Its smaller and faster).

Do me a favor and don’t use jQuery with AngularJS or ReactJS.

If still you want to experiment, try all the other technologies shown in the chart.