You can consider this repo as the curated list of Javascript resources (Videos + Blogs + Projects) present all over the internet. One can use this for learning new framework/libraries or for refreshing their concepts. The motive behind starting this repo is to provide a all-in-one reference for javascript, build by GDG New Delhi community (For the community and by the community). All the listed links are free resources i.e, blogs, youtube videos etc. We don't include paid resources because they might not be accessible to everyone.
Feel Free to add some interesting stuff to the list.
-
- MDN, w3schools, csstrick etc.
---------------- Awesome Random Stuff --------------------
- Awesome Blogs
- Awesome Videos/talks
- Awesome Youtube Channels
- Awesome Libraries
- Awesome Github
- Awesome Free Website Templates
JavaScript is the most widely deployed language in the world. Whether you’re interested in writing front-end client side code, back-end code for servers, or even game development, you’ll be able to accomplish all of this and more with JavaScript.
In simple words, we can say that with the help of JS, one can create fully functional dynamic website, Games , desktop apps for Windows/Linux/Mac and even cross platform native apps for Android and iOS.
This repo has an Index which you can brief you about all the content(TOC). This guide covers all the JS frameworks like Angular, React etc, some bleeding edge technologies like Bots/ AR / VR /ML using JS, development cycle specific topics like Linting, Testing etc and some random things like UI libraries/Ebooks etc. So, please refer to Table of Content to get max out of it.
You can use these resources to get explanation and docs on various concepts of JS and web .
Reference Name | Description | Used For |
---|---|---|
Mozilla Developer Network (MDN) | A wiki which is maintained by Mozilla and Web Dev Community | Understanding various JS concepts/methods, css related docs etc |
w3schools | w3schools is a website which is optimized for learning, testing, and training | Easy to understand guide, Working examples of various concepts of JS, HTML, CSS |
Tutorialspoint | Online training website | Working examples of JS, HTML, Java and many other techs |
CssTricks | CSS learning hub | Explains many useful and complex topics of CSS |
ECMAScript (ES) is a scripting language specification standardized by ECMAScript International. It is used by applications to enable client-side scripting. Languages like JavaScript, Jscript and ActionScript are governed by this specification.
Note: If you are a newcomer then we recommed you to just get your hands on ES6 and thereafter you can start learning any new framework. ES7/ES8 = ES6 + few extra features.
- Intro
ECMAScript 6 (ES6, often referred to as “Harmony”) is the sixth major release of the ECMAScript language specification. JS uses standards defined by ECMAScript. - Blogs
- Questions
- Videos
- Links
- Books
- Intro
ECMAScript 8 or ECMAScript 2016 was official release of year 2016. - Blogs
- Videos
- Links
- Intro
ECMAScript 8 or ECMAScript 2017 was officially released at the end of June 2017 by TC39 - Blogs
- Videos
- Links
- Intro
Web app is a client–server computer program which the client (including the user interface and client-side logic) runs in a web browser. Common web applications include webmail, online retail sales, online auctions, wikis, instant messaging services and many other functions. All the source code is hosted on server(A computer somewhere in this world or cloud like AWS/GCP/Azure etc) and any browser request it to access its content. We can classify website in two broad terms i.e, Static websites - whose content doesn't change like Portfolio Websites and Dynamic Websites - whose content keeps on changing like Facebook, Twitter etc. - Blogs
- Videos
- Links
- Intro
"Front-end" typically means the parts of the webapp a user interacts with. Everything which is visible on a website like Dropdown, buttons, input fields, colors (UI) comes under Frontend. - Blogs
- Videos
- Links
- Courses
- Intro
"Back-end" covers the parts that webapps do, but the user is unaware of or cannot see for eg- Talking to the databases, making a 3rd party API request, running business logic etc. - Blogs
- Videos
- Links
- Courses
- Intro
Angular is a JavaScript-based open-source front-end web application framework mainly maintained by Google and its community. - Blogs
- Questions
- Videos
- Links
- Intro
Polymer is an open-source JavaScript library for building web applications using Web Components. The library is being developed by Google developers and contributors on GitHub. - Blogs
- Videos
- Links
- Intro
React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. - Blogs
- Videos
- Links
- Intro Vue.js is an open-source JavaScript framework for building user interfaces.
- Blogs
- Videos
- Links
- Intro
Ember.js is an open-source JavaScript web framework, based on the Model–view–viewmodel pattern. It allows developers to create scalable single-page web applications - Blogs
- Videos
- Links
- Intro
Sails.js is a Model-View-Controller web application framework developed on the top the Node.js environment (Express). - Blogs
- Videos
- Links
- Intro
Express.js, or simply Express, is a web application framework for Node.js, - Blogs
- Videos
- Links
- Intro
Restify is a Node.js framework built to create RESTful Web services. - Blogs
- Videos
- Links
- Intro
A rich Node.js framework for building applications and services. More Configuration less Code. - Blogs
- Videos
- Links
- Intro
Koa is a Node.js web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs. - Blogs
- Videos
- Links
- Intro
Full-featured Node.js Framework to create awesome and powerful websites, e-commerce, REST services, real-time applications or applications for IoT - Internet of Things. - Blogs
- Videos
- Links
- Intro
LoopBack is a highly-extensible, open-source API framework. - Blogs
- Videos
- Links
- Intro
Meteor is an open source platform for web, mobile, and desktop. It's a Nodejs based full stack framework that can easily help you create Web Apps, Desktop Apps (electron.js integration), Mobile Apps (cordova integration) etc. - Blogs
- Videos
- Links
- Intro
Open-Source Full-Stack Solution For MEAN Applications. It can give you a headstart by providing fully enabled project (AngularJS + MongoDB + Node.js + Express.js). - Blogs
- Videos
- Links
- Intro
Build cross platform desktop apps with JavaScript, HTML, and CSS. electronjs.org - Blogs
- Videos
- Links
*
- Intro
Reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change (Wikipedia). RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code (RxJS Docs). - Blogs
- Videos
- Links
- Intro
RxJS powered state management for Angular applications, inspired by Redux. - Blogs
- Videos
- Links
- Intro
Redux is a predictable state container for JavaScript apps. - Blogs
- Videos
- Links
- Intro
NGXS is a state management pattern + library for Angular. - Blogs
- Videos
- Links
- Intro
AngularFire is a library that can help you to use firebase with Angular. https://github.com/angular/angularfire2 - Blogs
- Videos
- Links
- Intro
Linters are automated tools that help programmers increase quality of their code. - Blogs
- Videos
- Links
- Intro
Combining(bundling) various modules used by a project into one single organized module is known as module bundling. Bundling Modules has various benefits like lowering App load time, automatic tree shaking etc. Some commonly used Javascript module bundlers are Browserify, RequireJS, Webpack. - Blogs
- Videos
- Links
- Intro
Task runners are tools used to automate tasks in the development process. They can be operations such as the compilation of TypeScript files or the compression of JavaScript files. The two most popular JavaScript task runners are Grunt and Gulp. - Blogs
- Videos
- Links
- Intro
Package managers are pieces of softwares that let you manage the dependencies (external code written by you or someone else) that your project needs to work correctly. - Blogs
- Videos
- Links
- Intro
Transpilers, or source-to-source compilers, are tools that read source code written in one programming language, and produce the equivalent code in another language. Languages you write that transpile to JavaScript are often called compile-to-JS languages, and are said to target JavaScript. - Blogs
- Videos
- Links
- Intro
Software testing is defined as an activity to check whether the actual results match the expected results and to ensure that the system is Defect free. Generally there are three types of testing methods, Unit testing, Integration testing and End to End testing. - Blogs
- Videos
- Links
- Intro
Progressive Web Apps are user experiences that have the reach of the web, and are: Reliable(Load instantly and never show the downasaur, even in uncertain network conditions), Fast(Respond quickly to user interactions with silky smooth animations and no janky scrolling) and Engaging(Feel like a natural app on the device, with an immersive user experience). You can use any framework like React, Angular, Polymer or even plane vanilla JS for creating PWA. - Blogs
- Videos
- Links
- Courses
- Intro
Web also supports AR with the help of some cool libraries. You just need a browser to make a WebAR app. - Libraries
- Blogs
- Videos
- Links
- Intro
WebVR is an experimental JavaScript API that provides support for virtual reality devices, such as the HTC Vive, Oculus Rift, Google Cardboard or OSVR in a web browser. Experience Virtual Reality right into the browser. - Blogs
- Videos
- Links
- Libraries
- Intro
Machine Learning can be implemented in the browser using some famous libraries like TensorFlow.js, Brain.js and many others. - Blogs
- Videos
- Links
You can use these channels to learn JS and its frameworks/libraries .
Reference Name | Description | Used For |
---|---|---|
freecodecamp | freecodecamp YT channel has many tutorial series on various JS frameworks | ES6, Angular, vue.js, React etc |
AngularFirebase | AngularFirebase channel covers various tutorials on angular and its integration with different frameworks/services like firebase,electron,stripe etc | All about angular |
Google Developers | Google Developers channel covers many google technologies and news | Getting updates on JS related news, tutorial series by googlers etc |
LearnCode.academy | They make tutorials on things like ES6, libraries and framework | ES6, Brain.js, vue.js etc |
Academind | The person behind this channel is a udemy instructor and make awesome videos on JS | Angular, ES6, vue.js, React.js and many more |
Traversy Media | Traversy Media releases many tutorials on web development and programming | Angular, Node.js, PHP, python and many more |
LevelUpTuts | LevelUpTuts also deals with web tech like React, Angular, Node, Meteor etc | Angular, React, Meteor, Node etc |
Fun Fun Function | Ex-spotify engineer releases awesome web tutorials | Angular, React, Meteor, Node , Js libraries, New awesome js stuff and much more |
Wes Bos | Wes bos is one of the best tutor, web developer. | CSS Grid, ES6, HTML, JS and its frameworks |
The Net Ninja | Net Ninja also covers many topics like Node.js GraphQL etc | React, Node.js, GraphQL and many more |
DevTips | DevTips includes tutorials on Git, Web Designing, CSS | Web Designing, CSS, Bootstrap etc |
Codecourse | Codecourse mostly talks about PHP and its frameworks but do include many other tutorials as well | PHP, Laravel, etc |
The Coding Train | Coding train includes many topics like WebGL, physics in JS, tensorflow.js, ml5.js which is built on top of TF.js and many more | WebGL, complex physics in JS, tensorflow.js, ES6 |
React Cast | ReactCasts is a good youtube channels which has many short ReactJS screencast and also covers Redux | ReactJS , Redux , ES6 |
DesignCourse | DesignCourse covers many topics of Web Designing / Angular/ Rxjs/ Adobe softwars | Web Designing like using SVGs in Web, Angular, Rxjs, HTML and CSS etc |
-
Libraries
-
UI
1- Notyf - A dead simple, responsive, vanilla javascript notification plugin. No jQuery required.
2- Parallax.js - Parallax.js is a dirt simple parallax scrolling effect inspired by Spotify.com and implemented as a jQuery plugin.
3- Stellar.js - Parallax has never been easier.
4- Relax.js - Parallax library based on VanillaJS -
Utility
1- Moment.js - Parse, validate, manipulate, and display dates and times in JavaScript.
2- Lodash - A modern JavaScript utility library delivering modularity, performance & extras.
3- Underscore - Underscore is a JavaScript library that provides a whole mess of useful functional.
-
PS: All the links listed below provide free to use templates but Please Make Sure That You Follow Their Guidelines before using them .
Resource | Description | Used For |
---|---|---|
Themewagon | Themewagon provides many premium beatiful templates but they also have a huge collection of free templates | Bootstrap and Material Design based templates, UI kits |
w3layouts | w3layouts have a huge collection of free templates which can also be used an inspiration for your next project | Bootstrap, Material Design, Flat Design, UI Kits, UI components |