29 Awesome JavaScript Learning Tutorials

29 Awesome JavaScript Learning Tutorials

This JavaScript Learning Tutorials list is a collection of simply awesome resources to help anyone level up their skills with JavaScript. JavaScript is everywhere we look, from the front end libraries and toolkits like React, Angular, and Vue, to the server side with NodeJS. Even with HTML5 and JavaScript, we see a push into the mobile computing space, which is a good thing as we prefer open source to closed systems. Modern day JavaScript has a lot to offer web developers, designers, and software engineers. Let’s take a look at some awesome resources we can all learn from now.


1. That JS Dude

That JS Dude

http://thatjsdude.com/

That JS Dude bills itself as the easiest and funniest way to understand JavaScript. At that JS Dude, you will learn how to better understand things like this, scope, hoisting, closure, inheritance, bind, call, apply, prototype, event delegation, dom, timers and other concepts that people sometimes find confusing. That JS Dude has various sections as well so you can drill down on the information that you are looking to better understand. There are sections for the console, javascript this keyword, scope and closure, arrays, interview questions, and even some tutorials about the popular React JavaScript Framework.


2. ES6 Katas

ES6 Katas

http://es6katas.org/

Katas are a form of training exercises in order to gain better mastery of a skill. The word has ties to the martial arts, so if you are looking for Bruce Lee style focus and mastery then you are going to love ES6 Katas. At ES6 Katas, you can learn the new flavor of JavaScript one step at a time. The topics include Array, Class, Destructuring, Generator, Map, Reflect, Set, Iterator, Template Strings, String, Symbol, Arrow functions, Block Scope, Rest operator, Spread Operator, Modules, Object, and Unicode. You can also subscribe to an RSS feed via tddbin which makes it super convenient to keep up with daily exercises.


3. Exploring ES6

Exploring ES6

http://exploringjs.com/

Exploring ES6 is a book by Dr Axel Rauschmayer. Axel is writer for the popular blog 2ality.com where he has frequently updated content about JavaScript, mobile computing, all forms of web development, and more. The blog has been online since 2005, so there is a wealth of good information there. His book is great for people that are already familiar with JavaScript, but need to come to grips with the new features of ES6 and how to best make use of them. There is a free online version of the book, however if you would like to support his work you can also opt to buy the ebook version for a small fee.


4. Speaking JS

Speaking JS

http://speakingjs.com/es5/

This resource is another resource by Dr Axel Rauschmayer and it focuses on JavaScript ES5. The preface gives us a good overview of what to expect from the book, as well as some perspective on JavaScript itself. Alex talks about how thanks to the Web, you absolutely can not avoid JavaScript, even if you are not keen to the quirks that it has. The book is broken down into four parts which include Basic JavaScript, The History of JavaScript, A reference type section, and finally some best practices to follow and advanced techniques.


5. JavaScript.info

javascript dot info

http://javascript.info/

Learn about JavaScript: from the Ground to Closures, Document and Events, Object Oriented Programming, Timing, Frames and windows, Regular expressions in JavaScript, and Advanced and Extra stuff.


6. Basics Of ES6 Generators

ES6 Generators

http://davidwalsh.name/es6-generators

David Walsh is a web developer and software engineer that works for and evangelizes Mozilla, the open source browser we all love. This article is actually written by Kyle Simpson who is an open source evangelist and passionate JavaScripter from Texas. Here, he talks about generators in ES6, and why they are exciting. To be sure, generators are a completely new way of thinking about functions in JavaScript, so count on reading this one a few times. Once you are ready, there are 3 more tutorials in the series include a deeper dive, going async, and going concurrent with ES6 generators.


7. Reactive MVC and the Virtual DOM

reactive mvc virtual dom

http://futurice.com/blog/reactive-mvc-and-the-virtual-dom

You may have heard of the popular JavaScript Framework by Facebook named React. React is really making a lot of noise in the web development industry, mostly for the new idea that it brings to the table in the form of Virtual Dom Rendering. In this article by Andre Medeiros, you will learn about how the Virtual DOM works, with many diagrams and examples to help the concepts sink in. The Virtual DOM approach is one of those things that is a bit controversial, however it’s worth learning about for you to draw your own conclusions.


8. JavaScript Application Architecture

JavaScript Application Architecture

https://medium.com/google-developers/javascript-application-architecture-on-the-road-to-2015-d8125811101b

Addy Osmani brings us the article about JavaScript Application Architecture. Addy is a powerhouse programmer working at Google on Polymer and Chrome and created Yeoman, TodoMVC, Material Design Lite, among other things. In this article, Addy covers some important architectural aspects of working with JavaScript such as composition, composition boundaries, shadow DOM, component messaging, workflow, APIs and Facades, persistent data structures, and the problem of offline scenarios for applications.


9. JavaScript Essentials

JavaScript Essentials

https://medium.com/javascript-scene/learn-javascript-b631a4af11f2

Eric Elliot is a master JavaScript programmer with an interest in viral apps, film, photography, music, education, and entrepreneurialism. In this article, Eric makes the case for JavaScript. Why? Because JavaScript is the platform language of the Web. In fact, using JavaScript will enable you to create applications capable of running on any platform you want whether that be basic websites, advanced web applications, native applications, or mobile computing. JavaScript is on all of these platforms. Eric puts a focus on learning what he calls the pillars of JavaScript, and those would be Functional Programming and Prototype based inheritance.


10. JavaScript Objects

JavaScript Objects

http://davidwalsh.name/javascript-objects

Douglas Crockford tells us that the simple types of JavaScript are numbers, strings, booleans, null, and undefined. Everything else would be considered an object. In JavaScript, objects are keyed collections which we can modify at will. Confusingly enough, in JavaScript, arrays are objects, functions are objects, regular expressions are objects, and, objects are objects. In this blog post, Kyle Simpson takes some of the mystery out of JavaScript Objects. Notably, the confusion that has been caused by the prototypal inheritance system and the fact that it is completely at odds with the classical way of thinking from languages such as Java, C++, and PHP.


11. Functional JavaScript

Functional JavaScript

https://drboolean.gitbooks.io/mostly-adequate-guide/content/

Functional programming is considered to be one of the pillars of JavaScript. You are not required to use JavaScript in order to do functional programming, however this excellent resource gives us the benefit of teaching functional programming using JavaScript.


12. Drawing and Animation With JavaScript

Drawing with JavaScript

https://www.khanacademy.org/computing/computer-programming/programming

Khan Academy is an amazing resource for learning just about anything you can imagine. With this course, Khan Academy jumps into JavaScript learning tutorials and teaches you how to work with animation and drawing. The course is broken down into the following sub sections. Intro to Programming, Drawing Basics, Coloring, Variables, Animation Basics, Strings, Functions, Logic and Flow control, debugging, handling loops, writing clean code, arrays, objects, object oriented design, and becoming a better programmer.


13. Re Introduction To JavaScript

reintroduction to javascript

https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

The Mozilla Developers Network is the closest thing you’ll find to an official user manual for the JavaScript programming language. In this javascript learning tutorial, you get to benefit from the contributions of 114 people! This articles aims to bring understanding and minimize confusion about the language. It goes from A to Z and covers literally everything you need to know including numbers, strings, variables, operators, control structures, objects, functions, custom objects, closures, and memory leaks.


14. The Dao of Immutability

immutable javascript

https://medium.com/javascript-scene/the-dao-of-immutability-9f91a70c88cd

Sometimes we are presented with terms that may seem ambiguous during the course of our JavaScript learning. Things like Immutability, Separation, Composition, Conservation, Flow, and Wisdom. Some of these might be straight forward, while others leave you scratching your head. Eric Elliot take you on a journey through The Church of Lambda, where one is brought to the light by asking the question, “Is it not true that the word for ‘not functional’ is ‘dysfunctional’?”


15. JavaScript.com

javascript dot com

https://www.javascript.com/

This website is brought to us by Code School as a free resource for all JavaScript developers. Not only is JavaScript powerful and advanced for professional programmers, it is also a great programming language for beginners as well. The team from Code School has created a round up of their favorite JavaScript resources, and built an entire tutorial based course around them. Community members also contribute to the website, and in addition to helping developers get up to speed, it is a goal to also cater to more advanced programmers with up to date news, frameworks, and libraries.


16. Pro JavaScript Concepts

Pro Javascript Concepts

http://developer.telerik.com/featured/pro-javascript-concepts-for-enterprise-developers/

For the more seasoned developers that are dealing with JavaScript in the enterprise, this blog post by Jeremy Likness is a great read. In fact, he dares you to – “Trust Me, I’m an Enterprise JavaScript Developer” Some might say that sounds like an oxymoron, yet it’s true – JavaScript is in fact in the enterprise today! Jeremy covers some of the ways to implement the prototypal nature of the language in addition to the type system, scope, closures, captures, this, and more.


17. JavaScript at Codecademy

JavaScript Codecademy

https://www.codecademy.com/tracks/javascript

Codecademy has revolutionized the online code learning industry with their in browser exercise based curriculum. A great benefit to this style of learning is the immediate feedback students are able to gain access to in order to refine and hone their skills as they solve new challenges. This particular track focuses directly on the JavaScript programming language and offers over 10 hours of quality exercises for the student to master. You don’t need to be an expert either. Simply bring your curiosity and enthusiasm, and you will have all it takes to complete this excellent series at Codecademy.


18. Eloquent JavaScript

eloquent javascript

http://eloquentjavascript.net/

No Javascript roundup list would be complete without the excellent Eloquent JavaScript now in it’s second edition. The author Marijn Haverbeke has generously made his work available for free online, but you do have the option to support his cause – not to mention ease your eye strain, by purchasing a paperback copy of the book for your reading pleasure. This resource is definitive and exhaustive covering values, types, operators, program structure, functions, data structures, objects, bugs, error handling, regex processing, modules, document object model, events, canvas, http, forms, nodejs, and more.


19. JavaScript The Right Way

JavaScript The Right Way

http://www.jstherightway.org/

This is a clean and classy website designed by William Oliveira with a fantastic overview of JavaScript the language, the ecosystem, and the community. With contributions from over 25 different programmers, you can be sure this is an excellent resource. It also provides a great list of developers to follow on Github such as fat, Richard Worth, isaacs, Angelina Fabbro, Brendan Eich, Michal Budznski, Douglas Crockford, TJ Holowaychuk, Paul Irish, rauchg, Addy Osmani, Joe Zimmerman, Nicholas Zakas, John Resig, Dave Herman, Tim Caswell, Mr.doob, Christian Heilmann, Rick Waldron, James Halliday, David Walsh, Sindre Sorhus, and Nicolas Bevacqua.


20. JavaScript For Cats

JavaScript For Cats

http://jsforcats.com/

In no other place are cats more prevalent than the modern day internet. As such, there is a website dedicated to making sure our most popular feline friends know how to navigate their way around the JavaScript language. In reality, the Cats are not actually going to learn how to code – but the point is that JavaScript is so easy, even your favorite feline could do it! I’m pretty sure Garfield is secretly a JavaScript Ninja, though I am unable to substantiate this with facts. JavaScript For Cats is a great addition to our JavaScript learning tutorials and will cover all of the usual topics you will need to be familiar with such as the console, strings, values, variables, built in functions, writing new functions, loops, arrays, objects, callbacks(whoa!), and recommended ready.


21. JavaScript Fundamentals for Absolute Beginners

Microsoft JavaScript Training

http://www.microsoftvirtualacademy.com/training-courses/javascript-fundamentals-for-absolute-beginners

This is a series of video screencasts brought to you by Bob Tabor. Bob is the owner of Learn Visual Studio.net where he teaches enterprise level programming catering to customers such as Microsoft, Hewlett Packard, Boeing, Disney, FedEX, and other Fortune 500 companies. Bobs’s JavaScript series on Microsoft’s Channel9 developer channel will introduce you to web based video games, JavaScript powered user interfaces, and other elements of dynamic web development using JavaScript. Each concept in the series gets it’s own dedicated video tutorial, so it is the perfect way to learn JavaScript – one concept at a time.


22. Modular JavaScript

Modular JavaScript

https://www.youtube.com/playlist?list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f

Web Developer Will Stern dives into the JavaScript waters by teaching you how to write clean and modular JavaScript code. This particular video screencast series is hosted on Youtube and covers the object literal pattern, converting jQuery to an object literal module, revealing module pattern, pubsub design pattern, pubsub implementation, and implementing classical inheritance and object oriented programming in JavaScript.


23. You Don’t Know JavaScript

you dont know javascript

https://github.com/getify/You-Dont-Know-JS

As we have already seen in items 6 and 10 so far, Kyle Simpson is an expert JavaScript programmer. In addition to the articles we have already highlighted, we now would like to mention Kyle’s work on the You Don’t Know JavaScript book series. These are a series of books which you can read online for free. The books cover a wide range of topics from getting started to object prototypes, asynchronous programming, and much more. This series of books is in fact a contrary challenge to The Good Parts, made so famous and controversial by Douglas Crockford who coined the thought process. Kyle’s approach is to learn deeply and fully the entirety of the JavaScript language, not just The Easy Parts, The Safe Parts, or The Incomplete Parts.


24. D3 Tips and Tricks

d3 tips and tricks

https://leanpub.com/D3-Tips-and-Tricks/read

D3 is the data visualization library for the web built with JavaScript. It helps a developer take information and data points, then makes that information more accessible to people using a visual format by way of a web browser. D3 is incredibly powerful and advanced, but it is not a tool for beginners. The learning curve is fairly steep for newcomers to the language, but this particular project really shows what is possible with JavaScript. Once you have the basics down, if data visualization interests you at all, D3 is definitely something you will want to learn. This free online book by Malcom Maclean will help those that are interested in leveraging the D3 JavaScript Library in their own websites.


25. JavaScript Free Resources

Free JavaScript Resources

https://www.javascript.com/resources

This is the curated list of Javascript tutorials by the team at JavaScript.com. The list includes Try JavaScript, Code School’s JavaScript Road Trip, Pluralsight’s Quick Start To JavaScript, The Mozilla Developers Network JavaScript Guide, Codecademy’s JavaScript Track, Eloquent JavaScript, JavaScript For Cats, You Don’t Know JavaScript, Try jQuery, and JSBooks – a large collection of free JavaScript books you can read online for free.


26. JSBooks

JSBooks

http://jsbooks.revolunet.com/

JSBooks is so incredible and epic, that we had to give it it’s own numbered bullet point in our awesome list of javascript learning tutorials. JSBooks is a website created by revolunet, expert consultants and developers for modern web applications on desktop and mobile platforms. Visit their JSBooks resource to filter by Beginning, Intermediate, and Advanced topics, so that you can drill right down to the level of learning you are most interested in, or ready for.


27. Prototypal Inheritance In JavaScript

prototypal inheritance

https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3

This is part one of Eric Elliot’s Two Pillars of JavaScript. In it, Eric talks about his journey as a computer programmer. Before JavaScript, he was programming in things like C++, Delphi, and Java – all of which do not have prototype based inheritance. We learn that Prototypal Inheritance is another way of saying objects without classes and OLOO or objects linking to other objects. It is a completely different way of thinking that that of the classical model, and this is a great article to explain how it all works from someone who began in classical land, and ended up in the prototype world.


28. Awesome JavaScript

awesome javascript

https://github.com/sorrycc/awesome-javascript

We’re starting to get a little Meta here. The JavaScript list you are reading is referring to a JavaScript list of awesomeness. Awesome JavaScript is a project hosted on Github which collects all of the awesome browser side JavaScript libraries, in addition to Package Managers, Loaders, Bundlers, Testing Frameworks, Quality Assurance Tools, Model View Controller Frameworks, Node based content management systems, data visualization libraries, utilities, tutorials, are recommended reading.


29. Chrome Developer Tools

Chrome Developer Tools

https://developers.google.com/web/tools/chrome-devtools/

In conclusion, we come to the Google Chrome Developer Tools website. No other tool is going to allow you to do a deep dive into your JavaScript code as it runs in the browser like Chrome Dev Tools. It has become a necessary skill set to have for any web developer. Google makes available some excellent tutorials, tips and tricks for getting your Dev Tools environment set up and working like a champ.


29 Awesome JavaScript Learning Tutorials Summary

As they say in Hollywood, That’s A Wrap! This list of incredible JavaScript learning resources should have you busy for days, weeks, and months as you learn JavaScript as a beginner, or polish your chops as an expert. Thanks for reading!