List of Web Development (JS) Resources You Should Know About...

[CharlesRajendran]

According to many surveys, javascript is the most popular and used language in the software world. Javascript is ubiquitous, we can use javascript from front end development to machine learning, IOT and blockchain. In this post, I have added a list of topics in javascript/ web development that is important to cover while learning javascript. Feel free add the missed once in the list in the comment section 😀😀 for others to know.

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.

[root]

Awesome Thanks bro. keep posting like this,

[CharlesRajendran]

Sure bro.

[hashan]

Thanks bro well done

[dev_lak]

Very usefull, thanks

[kapilsri]

I like this

[DPiyumantha]

Thank you!

[Nubelle]

@CharlesRajendran Thanks Bro

[imadusanka]

thank you bro