JavaScript is considered one of the world's most popular programming languages. It is the programming language of the Web and easy to learn. It is also one of the core technologies of the World Wide Web, alongside HTML and CSS. Over 97% of websites use JavaScript on the client side for web page behavior, often incorporating third-party libraries. Your journey to mastering this programming language begins here.
To make your journey easier, pick a path
Basics of HTML
Mark as done
Done
Basics of HTML
Get started on your JavaScript journey by learning the basics of HTML using the resources below.
Learn HTML Basics for beginners
Introduction to HTML
What is HTML? optional
HTML Documentation optional
Responsive Design
Mark as done
Done
Responsive Design
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. Learn more about this using the resources below
Introduction to Responsive Web Design
Learn Web Development - Responsive Web Design optional
Responsive Web Design Certification
CSS Responsive Web Design Tutorial
CSS PreProcessors
Mark as done
Done
CSS PreProcessors
A CSS preprocessor is a scripting language that extends CSS and is compiled into regular CSS syntax. Learn more about CSS PreProcessors using the resources below.
CSS PreProcessors Explained
What is a CSS PreProcessor?
CSS Preprocessing optional
Sass vs Less vs Stylus - CSS PreProcessors
Basics of CSS
Mark as done
Done
Basics of CSS
Learn some of the basics of CSS programming using the resources below.
Introduction to CSS
HTML and CSS Crash Course
CSS Basics
Free Basic CSS Tutorial
CSS Bootstrap Framework
Mark as done
Done
CSS Bootstrap Framework
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. Learn more about the Bootstrap framework for CSS using the resources below.
How to Set Up and Use Bootstrap - Tutorial
Learn Bootstrap in 30 Minutes by Building a Landing Page
Bootstrap CSS Framework Full Course
CSS Foundation Framework
Mark as done
Done
CSS Foundation Framework
Foundation framework is a front-end framework for designing beautiful responsive websites. It integrates classic Web design languages HTML and Cascading Style Sheets (CSS) with other tools to provide a responsive environment for design. Learn more about this framework using the resources below.
Foundation CSS Framework Tutorial Crash Course
Foundation Framework Course
JavaScript Syntax
Mark as done
Done
JavaScript Syntax
JavaScript syntax refers to the set of rules that define how a JavaScript program is correctly structured. Learn more about the various syntax for JavaScript using the resources below.
JavaScript Syntax
JavaScript Tutorial for Beginners
Understanding JavaScript Syntax optional
Data types
Mark as done
Done
Data types
In JavaScript there are various types of data that can be used within the program and you can learn more about these data types using the resources below.
Data Types
JavaScript Data Types and Data Structures
Core Data Types in JavaScript and their functions
Data Types in JavaScript Video Tutorial optional
Arrays
Mark as done
Done
Arrays
In JavaScript, an array is an ordered list of values. It is often used when you want to store list of elements and access them by a single variable. Learn more about Arrays using the resources below.
Array in JavaScript
The Beginner's Guide to JavaScript Arrays
The JavaScript Array Handbook
JavaScript Arrays and How They Work
Objects
Mark as done
Done
Objects
In JavaScript, an Object is a data type, which is an unordered collection of key-value pairs. Each key-value pair is called a property. Learn more about Objects in JavaScript using the resources below.
What are Objects?
JavaScript Objects with Examples
JavaScript Objects and their Properties
Modern JavaScript Tutorial - Objects
AJAX, DOM Manipulation
Mark as done
Done
AJAX, DOM Manipulation
AJAX stands for Asynchronous JavaScript and XML. It describes a set of development techniques used for building websites and web applications.The Document Object Model (DOM) is a tree-like structure showing a hierarchical relationship between different HTML elements. In JavaScript, DOM can be manipulated to bring web pages to life. Learn more about AJAX and DOM manipulation using the resources below.
JavaScript: Ajax and DOM Manipulation
JavaScript DOM Tutorial
JavaScript DOM Crash Course
The Document Object Model optional
Methods
Mark as done
Done
Methods
JavaScript Methods are actions that can be performed on objects. It is a property containing a function definition. Learn more about Methods using the resources below.
JavaScript Methods
What are Methods in JavaScript
JavaScript Object Methods
Fetch API
Mark as done
Done
Fetch API
The Fetch API is JavaScript API that allows you to make HTTP requests to servers from web browsers. Learn more about the Fetch API using the resources below.
JavaScript Fetch API Explained by Examples
Using Fetch API
Asynchronous JavaScript: Fetch API
Working with Data and API in JavaScript
How to Use The JavaScript Fetch API to Get Data
Design Psychology
Mark as done
Done
Design Psychology
Learn more about Designs and design psychology in JavaScript using the resources below.
The Psychology in UX Designs
Design Principles for Programmers optional
Design Patterns in JavaScript optional
How Psychology Affects Designs optional
The Laws of UX optional
Product Design
Mark as done
Done
Product Design
Learn more about Product design using the resources below.
What is UI/UX and Product Design optional
Product Design - How To Get Started optional
The Beginner's Guide to Product Design
UX Designer vs Product Designer optional
UI Theory
Mark as done
Done
UI Theory
Learn more about UI Theory using the resources below.
JavaScript for Designers
User Interface Theory and Web Design
IIFEs (Immediately Invoked Function Expressions)
Mark as done
Done
IIFEs (Immediately Invoked Function Expressions)
An Immediately-invoked Function Expression is a way to execute functions immediately, as soon as they are created. In JavaScript, IIFEs are very useful since they do not pollute the global object. They offer a simple way to isolate variable declarations. Learn more about IIFEs using the resources below.
Step by Step Understanding of JavaScript IIFEs
What Are Immediately Invoked Function Expressions?
IIFEs
Arrow Functions
Mark as done
Done
Arrow Functions
Arrow functions are like Lambda functions in Python since they are basically a new way to write anonymous function expressions in JavaScript. Learn more about this using the resources below.
Understanding Arrow Functions in JavaScript
Arrow Functions
The Basics of Arrow Functions
Arrow Function Expressions
JavaScript Object-Oriented Programming
Mark as done
Done
JavaScript Object-Oriented Programming
Object-Oriented Programming allows you to create different objects from a common object. The common object is usually called a blueprint while the created objects are called instances. Learn more about this using the resources below.
Object Oriented Programming in JavaScript
Easy to Understand Examples of OOP in JavaScript
OOP in JavaScript Made Simple
Learn JavaScript OOP optional
JavaScript ES6
Mark as done
Done
JavaScript ES6
JavaScript ES6 also known as ECMAScript 6 was the second major revision to JavaScript. It brought in new syntax and new features to make your JavaScript code more modern and readable. You can learn more about ES6 using the resources below.
JavaScript ES6
ES6 JavaScript Course for Everyone
ES6 Tutorial: Learn Modern JavaScript
Write Less, Do More - JavaScript ES6
Closure
Mark as done
Done
Closure
In JavaScript, a closure can be defined as a feature in which the inner function has access to the outer function variable. Learn more about this using the resources below.
Closure JavaScript Doc
A Simple Explanation of JavaScript Closure
JavaScript Closure Tutorial
How to Use Closures in JavaScript
Closures Explained optional
Promises
Mark as done
Done
Promises
A promise in JavaScript is an object that may produce a single value some time in the future and may be in one of 3 possible states: fulfilled, rejected, or pending. Learn more about this using the resources below.
Understanding JavaScript Promises
JavaScript Promise Tutorial
Promise JavaScript Doc
Asynchronous JavaScript - Promises optional
JavaScript Promises Explained optional
Scope
Mark as done
Done
Scope
Scope in JavaScript refers to the availability of variables and functions in certain parts of the code. The two types of scope in JavaScript are local and global. Learn more about Scope using the resources below.
A Simple Explanation of Scope in JavaScript
Learn JavaScript - Scope
Understanding Scope in JavaScript
Isomorphic applications in JavaScript
Mark as done
Done
Isomorphic applications in JavaScript
Isomorphic JavaScript applications can simply be defined as applications that share the same JavaScript code between the browser client and the web application server. In other words, the code of an isomorphic application in JavaScript can run both in the server and the client. Learn more about this using the resources below.
What is Isomorphic JavaScript
Isomorphic JavaScript: The Future of Web Apps optional
Isomorphic JavaScript Apps
What is an Isomorphic Application? optional
NPM
Mark as done
Done
NPM
NPM (Node Package Manager) and is one of the multiple package managers for the JavaScript programming language. Learn more about NPM using the resources below.
NPM Doc
A Simple Guide to Understanding NPM
NPM Tutorial for Beginners
Lodash
Mark as done
Done
Lodash
Lodash is a JavaScript library that provides utility functions for common programming tasks. Instead of writing common functions repeatedly, the task can be accomplished with a single line of code. Learn more about this using the resources below.
Lodash Official Doc
Lodash Functions To Know
Introducing JavaScript Lodash Library
Grunt
Mark as done
Done
Grunt
Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. Learn more about this from the resources below.
Grunt Library Tutorial
Web Development - Grunt
Introduction to Grunt
RxJS
Mark as done
Done
RxJS
RxJS (Reactive Extensions for JavaScript) is a library for reactive programming. Basically, it allows you to write software that is reusable, configurable, and asynchronous. Learn more about this from the resources below.
RxJs Introduction
Learn RxJs
RxJs Crash Course
Underscore.js
Mark as done
Done
Underscore.js
Underscore is a popular library in JavaScript that provides 100+ functions to facilitate web development. You can learn more about this from the resources below.
Underscore.js Official Doc
Using The Underscore.js Library
Beginner's Guide to Underscore.js
JavaScript Underscore Library
D3.js
Mark as done
Done
D3.js
D3.js is a library in JavaScript that is used for manipulating documents based on data. You can use D3 to bring data to life using HTML, SVG, and CSS. Learn more about this using the resources below.
D3.js Official Doc
D3.js Practical Introduction
Introduction to D3.js Library
D3.js Course
Chart.js
Mark as done
Done
Chart.js
Chart.js is a free, open-source library in JavaScript for data visualization and allows designers and developers to draw different kinds of charts using the HTML5 canvas element. Learn more about this library using the resources below.
Chart.js Official Doc
Getting Started with Chart.js
Moment.js
Mark as done
Done
Moment.js
MomentJS is a library in JavaScript that helps with parsing, validating, manipulating and displaying date and time in JavaScript in a very easy way. Learn more about this library using the resources below.
Working with JavaScript Dates using Moment.js
Examples of Moment Library in JavaScript
Working with Moment.js Date Libraries
VueJS
Mark as done
Done
VueJS
Vue.js is an open-source front end JavaScript framework for building user interfaces and single-page applications. Learn more about this framework using the resources below.
Introduction Vue.js
Vue.Js for Absolute Beginners Course
Getting Started with Vue
Learn Vue.js
ReactJS
Mark as done
Done
ReactJS
React.js framework is a tool to build UIs. Typically it is a JavaScript library for building user interfaces. Learn more about this using the resources below.
React.js Tutorial
Step by Step Guide to Learn React.js
React Js: Features, Installations, Pros & Cons
AngularJS
Mark as done
Done
AngularJS
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language. Learn more about this framework with the resources below.
AngularJS Tutorial
Understanding AngularJS optional
AngularJS Tutorial for Beginners
Material Design Components
Mark as done
Done
Material Design Components
Material Design Components for the web (MDC Web) offers designers and developers a way to implement Material Design in their websites. Learn more about this using the resources below.
Material Design Component Libraries
Material Design Component for Angular Apps
Material Design for Android optional
Server-side JS
Mark as done
Done
Server-side JS
Server Side JavaScript is an extended version of JavaScript that enables back-end access to databases, file systems, and servers. Learn more about this with the resources below.
Server-side Website Programming
What is Node.js Server-side JavaScript?
Beginner's Guide to Node.js
Understanding Server-side JavaScript
Derby.js
Mark as done
Done
Derby.js
Derby.js is a full stack Node.js framework that helps provide seamless data synchronization between the server and the client. Learn more about this from the resources below.
Derby.js Tutorial
Derby.js - Playing with Models
Derby JavaScript Framework
Meteor.js
Mark as done
Done
Meteor.js
Meteor.js is used for building modern web and mobile applications. One of its most important features is that it provides real-time updates. This way, all changes on the web will be updated on the template instantly. Learn more about this using the resources below.
Meteor Tutorial
Learn Meteor.js From Scratch
Build a Meteor.js App in 45 Minutes
Why Should I use Meteor.js? optional
D3.js
Mark as done
Done
D3.js
D3.js is a library in JavaScript that is used for manipulating documents based on data. You can use D3 to bring data to life using HTML, SVG, and CSS. Learn more about this using the resources below.
D3.js Documentation
D3.js - A Practical Introduction
Data Visualization in Java using D3.js
Learning SVG and D3.js for Creating Data Visualization
Chart.js
Mark as done
Done
Chart.js
Chart.js is a free, open-source library in JavaScript for data visualization and allows designers and developers to draw different kinds of charts using the HTML5 canvas element. Learn more about this library using the resources below.
Charts.js Documentation
Getting Started with Charts.js
ThreeJs
Mark as done
Done
ThreeJs
Three.js is a cross-browser JavaScript Data Visualization library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL. Learn more from the resources below.
Getting Started with Three.js
Three.js Tutorial - How to Build a Simple Car with Texture in 3D
Three.js Fundamentals
Echarts
Mark as done
Done
Echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browsers. Learn more from the resources below.
ECharts Document
ECharts JavaScript Library
Step up your Data Visualization Game with Apache ECharts
Highcharts
Mark as done
Done
Highcharts
Highcharts is a JavaScript based data visualization charting library meant to enhance web applications by adding interactive charting capability. Learn more about this library from the resources below.
Highcharts Tutorial
Highcharts Tutorial for Beginners
Understanding Highcharts and its functions
Brain.js
Mark as done
Done
Brain.js
Brain.js is a javascript library. It is used for machine learning and neural networks in particular. Learn more about this library from the resources below.
An Introduction to Deep Learning with Brain.js
Machine Learning in JavaScript using Brain.js
Beginner's Guide to Neural Networks in JavaScript with Brain.js
TensorFlow.js
Mark as done
Done
TensorFlow.js
TensorFlow.js is a JavaScript Library for training and deploying machine learning models in the browser and in Node.js. Learn more about this library from the resources below.
TensorFlow Getting Started
Deep Learning and Neural Networks with TensorFlow.js
How to Code a Deep Learning Model with TensorFlow.js
Machine Learning Library - TensorFlow.js
ConvNetJS
Mark as done
Done
ConvNetJS
ConvNetJS is a JavaScript library for training Deep Learning models (Neural Networks) entirely in your browser. Learn more about this library from the resources below.
ConvNetJS - Deep Learning in your Browser
Convnetjs: Docs, Tutorials, Reviews
ml5.js
Mark as done
Done
ml5.js
ml5.js is a JavaScript machine learning library that is based on top of TensorFlow. Learn more about this library from the resources below.
A Beginner's Guide to Machine Learning with Ml5.js
Introduction to Ml5.js
Ml5 Beginners Guide
Why you should use Ml5.js optional
React Native
Mark as done
Done
React Native
React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. Learn more from the resources below.
React Native Course
Learn the Basics: React Native
Build Amazing React Native Apps for iOS and Android - Beginner's Guide
Cold Dive into React Native
Ionic
Mark as done
Done
Ionic
Ionic is a free, open-source, front-end Software Development Kit framework that enables you to create mobile-based applications for iOS, Windows, and Android phones using the same codebase. Learn more about this from the resources below.
Ionic Tutorial
Beginner's Guide to JavaScript Framework - Ionic
Getting Started with Ionic Framework
Mobile Native Applications
Mark as done
Done
Mobile Native Applications
Learn more about other Mobile Native application frameworks in JavaScripts with the resources below.
JavaScript Mobile Apps
Top JavaScript Framework for Mobile Native Apps
System Design
Mark as done
Done
System Design
System design is the process of defining the elements of a system like its architecture, modules, components, interfaces and the data that goes through that system. As a concept, Systems design could be seen as the application of systems theory to product development. Learn more about this from the resources below.
Practicing System Design in JavaScript
System Design Course for Beginners
Grokking the System Design Interview optional
System Design Interview Practice Tutorials
Design Patterns in JavaScript
Mark as done
Done
Design Patterns in JavaScript
Design patterns are advanced object-oriented solutions to commonly occurring software problems. Patterns are about reusable designs and interactions of objects. Learn more about this using the resources below.
Comprehensive Guide to JavaScript Design Patterns
Learning JavaScript Design Pattern
Clean Up Your Code with Design Patterns
JavaScript Design Pattern Tutorial optional
System Design Principles
Mark as done
Done
System Design Principles
Learn more about some of the important system design patterns and principles for software development using the resources below.
Learn more about system development practices for software development using the resources below.
System Development Practices and Guidelines
System Development - An Overview
Systems Development Lifecycle
16 Best Practices for System Development Lifecycle optional
System Architecture in JavaScript
Mark as done
Done
System Architecture in JavaScript
You can learn about System Architecture in JavaScript from the resource below.
Explore JavaScript Architecture
Architectural Patterns
Mark as done
Done
Architectural Patterns
An architectural pattern is a general, reusable solution to a commonly occurring problem in software architecture within a given context. Learn more with the resources below.
Software Architectural Pattern
Types of Software Architecture Pattern
Software Architecture and Software Design Patterns optional
Test Your Skills
Mark as done
Done
Test Your Skills
There is no better way to consolidate your knowledge besides testing yourself. So, if you have made it this far, well done! Here's a chance to see how much you have learned. Take a JavaScript test below.