1. Basics
   HTML - https://www.youtube.com/watch?v=kDyJN7qQETA
   CSS - https://www.youtube.com/watch?v=yfoY53QXEnI
   Javascript - https://www.youtube.com/watch?v=PkZNo7MFNFg
   JQuery (Optional)

2. Learn a CSS Preprocessors - This will make css development much simpler with features like variables, mixins, modules and functions.
   ex: sass, less, stylus (sass is the most popular - https://www.youtube.com/watch?v=roywYSEPSvc)

3. Learn to use a CSS Library
   ex - Bootstrap, MatrializeCSS, Foundation, Bulma are the most popular CSS Libraries.
   Bootstrap : https://www.youtube.com/watch?v=5GcQtLDGXy8
   Materialise : https://www.youtube.com/playlist?list=PL4cUxeGkcC9gGrbtvASEZSlFEYBnPkmff

4. Learn to work with a transpiler (new version of javascript contain lots of cool feature, but not every browser supports those features, so you need a transpiler to compile new js into old js)
   ex - typescript, babel

5. Learn a JS Framework
   ex - React/ Angular/ Vue are the most popular.
   Angular - https://www.youtube.com/playlist?list=PLYxzS__5yYQlqCmHqDyW3yo5V79C7eaTe
   React - https://www.youtube.com/playlist?list=PLYxzS__5yYQmD7FV1YYz9UxPyGTNsFObp

6. Learn to use a package manager
   ex - npm or yarn (npm - https://www.youtube.com/watch?v=jHDhaSSKmB0)

7. Learn to use a testing framework
   ex - mocha and chai, jest, jasmine and karma (jest - https://www.youtube.com/watch?v=7r4xVDI2vho)

8. Learn functional style of programming (javascript is a very good language for functional style of programming with native and library support)
   functionaljs - https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84
   ex libraries - rambda.js or lodash (rambda - https://www.youtube.com/playlist?list=PLrhzvIcii6GMeyUfpn-o5xVCH3_UykrzI)

9. Learn to use node.js (node.js is an environment which will allow you to write js for the server site)
   ex - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

10. Learn a node.js web framework (express, koa)
    ex - https://www.youtube.com/watch?v=gnsO8-xJ8rs

Optional things (Good to know)

11. Learn to use a module bundler (this will bundle your files into one file which will improve the performance of your site)
    ex - webpack, rollup or parcel. (webpack is the most popular - https://www.youtube.com/watch?v=lziuNMk_8eQ)

12. Learn to use a task runner
    ex - Gulp, Grunt or npm scripts (gulp - https://www.youtube.com/watch?v=1rw9MfIleEg)

13. Use a scalfolding tool or a project generator (this will allow you to create different types of projects and generate boilerplate code)
    ex - yoeman (https://www.youtube.com/playlist?list=PLpP9FLMkNf54AFwvRgYb8KMbKCaqqopsl)

14. Web Assembly (for compute intensive functions)

15. Progressive Web Apps or Hybrid Development (Ionic, Native Scripts, React Native)
    pwa - https://www.youtube.com/playlist?list=PLNYkxOF6rcIAdnzEsWkg0KpMn2WJwMBmN
    ionic - https://www.youtube.com/playlist?list=PLYxzS__5yYQljbuGjaeugpqs9U07gS5P5
    react native - https://www.youtube.com/playlist?list=PLYxzS__5yYQlHANFLwcsSzt3elIbYTG1h

16. Responsive Web Design
    https://www.youtube.com/playlist?list=PL4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw

17. web accessibility
    https://www.udacity.com/course/web-accessibility--ud891

18. Learn to debug js with debuggers such as chrome dev tool.

19. GraphQL
    https://www.youtube.com/playlist?list=PL4cUxeGkcC9iK6Qhn-QLcXCXPQUov1U7f

20. Serverless

21. Asynchronous Programming (promises, async and await),

22. Reactive programming (rxjs)

23. State management (redux)

24. Guess.js (machine learning to improve site performance)

25. Linting -
    ESlint is the best in the business and TSlint for typescript, this is useful when we want to work as a team and want to maintain some coding standard. ESlint supports some style guides to use as a template standard (airbnb/standardjs/google style guide), and also you can add your own rules as well.