Best Resources to Learn JavaScript

JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much anything on a webpage.

Tutorials and Courses

  • JavaScript Guide – The guide shows you how to use JavaScript and gives an overview of the language. If you need exhaustive information about a language feature, have a look at the JavaScript reference.
  • The Complete JavaScript Course 2020: Build Real Projects! – This course will take you from a complete JavaScript beginner to an advanced developer. You will learn how to program, solve problems, structure and organize code using common JavaScript patterns.
  • Full Stack JavaScript – Teamtreehouse’s course not only teach you about JavaScript but also guide you how to use Node.js, a popular JS framework.
  • Eloquent JavaScript – This is a book about JavaScript, programming, and the wonders of the digital.
  • Introduction to JavaScript – This section will cover basic JavaScript programming concepts, which range from variables and arithmetic to objects and loops.
  • The Modern JavaScript Tutorial – This is a website dedicated to JS tutorials. You will learn about basics of the language and advanced topics.

Best JavaScript Frameworks

JavaScript Editors

You can code JavaScript using any text editors.

  • Atom
  • Visual Studio Code
  • Sublime Text
  • Brackets

Best JavaScript Plugins

  • 3D Model Viewer – View 3D models with many support formats such as 3ds, 3md, amf, assimp, dar, fbx, obj, zip, json, gcode, etc…
  • PDF Viewer – PDF Viewer is a responsive Javascript plugin for embedding PDF files on a webpage. It is coded in pure Javascript, and does not require jQuery to work. So you can use this in AngularJS or ReactJS applications also.
  • Zaudio – zAudio is an easy to use, simple and modern JavaScript audio player based on the HTML5’s audio element.
  • ScrollBooster – A lightweight and zero-dependency content drag-to-scroll library.
  • SVG.js – SVG.js has no dependencies and aims to be as small as possible while providing pwoerful tools for manipulating and animating SVG.
  • FilePond – A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
  • v8n – The ultimate JavaScript validation library you’ve ever needed.
  • Magic Grid – A simple, lightweight Javascript library for dynamic grid layouts.With Magic Grid, all you have to do is specify a container and listen for changes. A
  • autoComplete – Simple autocomplete pure vanilla Javascript library.
  • Pickr – Flat, simple, multi-themed, responsive and hackable Color-Picker library. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more.
  • Selection – Lightweight library to allow visual DOM Selections.
  • LuminJS – A JavaScript library to progressively highlight any text on a page.
  • Curtains.js – converts HTML elements containing images and videos into 3D WebGL textured planes.
  • Lookforward – Create page section transition.
  • Formee – A tiny (532B) library for handling <form> elements
  • Displaceable – A tiny, performant and configurable JavaScript library that smoothly displaces elements on mouse move.
  • Toastify – A plugin which shows beautiful notification messages.
  • Nightly.js – Enable night mode on your website.
  • Driver – A light-weight, no-dependency, vanilla JavaScript engine to drive the user’s focus across the page.
  • Smooth dnd – A fast and lightweight drag&drop, sortable library for with many configuration options covering many d&d scenarios. There is no external dependencies. It uses css transitions for animations so it’s hardware accelerated whenever possible.
  • Pell – This is the simplest and smallest WYSIWYG text editor for web, with no dependencies.
  • alpinejs – It is a rugged, minimal framework for composing JavaScript behavior in your markup, wgich offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.
  • EnlighterJS3 – EnlighterJS is an open source syntax highlighter written in pure JavaScript. It supports 40 languages/formats with 12 high quality themes.
  • js-cookie – Read and write cookie easily.

JavaScript Game Engines

  • Pixi.js – PixiJS is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility.
  • Phaser – Phaser is a HTML5 and JavaScript game engine which supports both a Canvas and WebGL renderer.
  • MelonJS – melonJS is a standalone library, a lightweight 2D sprite-based engine. It supports 3rd party tools for Texture Packing such as TexturePacker, Free Texture Packer, ShoeBox.
  • kiwi.js – Kiwi.js is a HTML5 game framework with blazingly fast WebGL rendering and complementary tools.
  • Crafty – This engine help developers make games in a structured way with the use of Entities & Components, and Eventbinding. There is no DOMmanipulation or custom drawing routines.
  • Stage.js – Stage.js provides a DOM-like tree data model to compose your application and internally manages rendering cycles and the drawing of your application.
  • Cocos2d-html5 – Cocos2d-html5 is a cross-platform 2D game engine written in JavaScript, based on Cocos2d-X.

Blog Posts

To refresh page in JavaScript, we use location.reload() function. It is used to reload the current document. But if the origin of the script calling location.reload() differs from the origin...

In JavaScript we use both var and let to declare a variable. However, they are not understood the same. The differences between them are scope. var is function scoped while...

When using JavaScript, if you want to know if an array is empty or not, you can use .length property, The length property of an array returns its size. If...

console.log() is a useful JavaScript method to print data into developer's console. //Syntax console.log(x); X can be of any data types, be it a string, or an inter, or an...

Before using an object's property in JavaScript, we need to check if it exists first. Otherwise, error or warning will be thrown instead. There are 2 ways to detect whether...

jQuery is a fantastic JavaScript library for developing user interactions quickly.  It has made web design faster, easier and more accessible. Following are the best jQuery plugins to save you...

Data tables is an important part in any admin dashboards. It helps show data to webmasters and users. That's why we need a good data table library to make data...

Adding calendar or a date field will become easier with these libraries. PickMeUp The plugin is a simple, powerful, customizable and lightweight standalone datepicker. There is no dependencies. It supports...
When developing a module in JavaScript, the export statement is used to export live bindings to functions, objects, or primitive values from the module. These data can be used by other modules, app with...

With the support of WebRTC, real-time communication capabilities in an app browser becomes reality. It supports many types of data, including voice, which allows developers to build powerful voice command,...

In JavaScript the getElementsByClassName() method returns a HTMLCollection object which is a collection of all elements in the document with the class name parameter in the method. The HTMLCollection object...

JavaScript is the most commonly used language for the 8th year straight with over 60% of user base. As a result, frameworks based on JavaScript are also very popular and...

setInterval() is a method which can be used to execute JavaScript script at specified intervals. We use it to display time from Date() class. HTML <div id="time"></div> JavaScript <script type="text/javascript">...

JavaScript UI frameworks have been popular these days. Developers turn to UI frameworks to write more maintainable code, design fast/consistent UI components, keep both view and state synchronized, provide routing...
Both setTimeout() and setInterval() methods provide us a good way to control when to call a function when writing in JavaScript. setTimeout() The method calls a function or evaluates an...

Chart.js is a a simple yet flexible JavaScript chart library for both designers & developers. If you want to download a chart as an image file, you can follow one...
HTML5 has come a long way since its birth. Games developed based on HTML5 have steadily replaced ones based on Flash. Free 2D HTML5 / JavaScript game engines Cocos2d-JS Cocos2d-JS,...
Charts help us to understand and read a complex data by presenting them in a simpler form. Instead of reading content rich data in text, it is easier to show...
Most PHP apps use parameters to query data. There are many cases you have to handle these parameters on front-end, hence JavaScript or jQuery is used. Actually, jQuery isn't necessary...
SweetAlert is a javascript library which makes popup messages easy and pretty. Download and Install [javascript] //use npm npm install sweetalert //use CDN: you can also find SweetAlert on unpkg...
It is easier to create an Youtube embed video by using the pre-amde code supplied by Youtube. Under a video, you click on "Share" then "Embed". There will be an...

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.