Best Resources to Learn JavaScript: 6 Tutorials and Courses, 17 Plugins, 5 Frameworks, Game Engines

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.

Our Tutorials

  • Difference between var and let in JavaScript
    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...
  • How to Check if a JavaScript Array is Empty
    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...
  • JavaScript console.log() Examples
    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...
  • Check if a JavaScript object has a property
    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...
  • 6 Best jQuery and JavaScript Data Table Libraries
    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...
  • 4 Best JavaScript and jQuery DatePicker Plugins
    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...
  • What does export (named, default) mean in JavaScript?
    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...
  • 8 Best JavaScript Voice Command and Speech Recognition Libraries
    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,...
  • Iterate through getElementsByClassName in JavaScript
    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...
  • 11 Best JavaScript Frameworks
    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...
  • Display realtime date and time using JavaScript
    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">...
  • 7 Best JavaScript UI Frameworks
    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...
  • Delay and loop function call with setTimeout and setInterval in JavaScript
    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...
  • Save chart as image with Chart.js
    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...

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.