JavaScript

JavaScript

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

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.

Software Design Principles - KISS, DRY, YAGNI, SOLID

Software Design Principles - The Basics

DRY and KISS Principles optional

Implementing SOLID, KISS, DRY, YAGNI Design Principles

System Development Practices

Mark as done

Done

System Development Practices

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.

JavaScript Test - Coderbyte

Got feedback?

Submitted! Thanks for your feedback!