JavaScript Complete Grandmaster Course 2026

Who should do this section.

Many people think JavaScript is a boring language and that the only reason we learn it is because it is built in to every Browser. BUT JavaScript is a whole lot more than this ... stick with me throughout this course and find out why.

Core to understanding JavaScript is to understand the relationship between the 3 core languages required to build any website - HTML, CSS and JavaScript. 

Your browser applies default CSS styles to your page, even without you knowing. This short video will start with writing HTML and then displaying it in a browser. You will see first-hand how the browser applies styles that we did not define in our html document.

Enough blabber. This lecture goes straight into a simple, yet practical, example of how you can use JavaScript to change text on a button. We talk about the <script> tag and what it means for JavaScript. We also go through the process of writing our first JavaScript. Very exciting ... enjoy!

JavaScript is a scripting language, which means that it cannot run on its own. What does it need in order to run? Watch the video to find out.

Many people consider JavaScript to be a safe programming language, but what exactly does this mean? Does this mean JavaScript is not powerful? 

Many people confuse Java and JavaScript, but the important thing to understand is that they are 2 entirely different languages. This lecture goes into more detail about their similarities and differences.

When starting out with JavaScript, you will definitely come across the term ECMAScript and ES6. But what do these mean and more importantly, how do they relate to JavaScript? 

ECMAScript come out with different enhanced updates and versions of JavaScript all the time. What version is the most popular one and what is the difference between ECMAScript 2015 and ES6? 

A little about ES6 and why its so highly referenced today.

JavaScript runs in 2 main environments and each environment provides API's or added functionality to the language. If you take away these extra APIs, you are left with pure JavaScript, or ECMAScript.

An introduction to this section and why it is important to understand JavaScript engines

In JavaScript, we write programs or scripts. These scripts are executed on the Browser. How does this happen? Via JavaScript engines.

It would be amazing if there was one JS Engine out there. Unfortunately this is not the case. There are a whole bunch of Engines, each competing against each other. We look at why this is the case, and touch on headless browsers and servers.

Although JavaScript is a programming language itself, it has be at some point converted into machine code. That's why we have engines.

The V8 Engine is incredibly powerful, and is developed by Google. Although you don't need to know how its inner workings operate, it is useful having a high level understanding of what it is and how it works. Enjoy!

The V8 JavaScript engine, developed by Google, has become ubiquitous in the world of web development and beyond. Powering the Chrome browser, which has over 3.5 billion users worldwide. The V8 engine's open-source nature and its integration with Chrome and Node.js have made it the de facto standard for running JavaScript code across browsers, servers, and other applications.

Before we move on, I want to quickly mention that JavaScript does live in different environments. This means that the way we use JavaScript. the methods and properties we have access to, depends on where we're using JavaScript.

Starting out learning about JavaScript can be daunting and very confusing. Trust me, I know.

It is not always easy to understand how web development works. What is the meaning of frontend vs backend code and where does JavaScript fit in? 

Thats what this short article is all about.

Well done for getting this far. But we're only just getting started so keep going!

Stay motivated and keep going.

A joke

Dealing in the console is vitally important, but it can also be a little overwhelming not knowing what the console is, where its from and what we can do with it. That's what this section is all about.

The Console is a place we can write JavaScript code. Lets see how it works!

The famous pop-up alerts ... yes they are ugly. But they are a JavaScript function and it does introduce us to some important nuances when it comes to running commands in the Console.

The most common method you'll use in the console is the log() method. It is very useful as a programmer when you want to test your code.

We've just looked at the console, and I think its the perfect time for me to explain the difference between statements and expressions in JavaScript.

JavaScript can manipulate items on a webpage, which we will be doing together later on in this course. But this is not all it can do. By interacting with the BOM, JavaScript has access to a few other cool functions.

We have seen that the Window object rules the roost. Now lets dive deeper into what it can provide us other than manipulating the page content.

Window instances accessing content from other window instances.

Unfortunately if you're using the BOM you may experience some weird results. This is because there are no standards that govern the BOM.

Lets now go a little deeper into the Console to find out what other methods are available to us.

The assertion method can be great to display alerts when a condition fails. Enough talk, lets see how it works.

The console is powerful, and can be used for more than simply logging output to a screen. This lecture will go into more detail on what methods are available to us on the console. It is a long lecture but please persevere. This stuff is awesome knowledge and will set you on the path of success.

Substitutions are a way for you to replace or substitute the % sign with objects, text and numbers. However, the new JavaScript syntax has Template Literals which are more common now and better to use. This is just a bonus lecture to show you what substitutions are and how it compares with Template Literals.

Some of my students were confused with what Substitutions are. This is an advanced topic and not many developers even know about format specifiers. These exist in the browser's console and are given to us by the Console API.

This lecture explains why you may want to use them, but more importantly, why we should use template literals if we can.

We've seen String Substitutions. But now how does template literals compare with the more traditional approach of using the + concatenation approach? Read this short article to find out.

Before you begin, I encourage you to download visual studio code and Quokka.

Writing code in a Console can be very cumbersome. Using an awesome IDE or text editor is crucial to making your life easier and code more organised. Let me introduce you to what an IDE is and I'll also share with you the one that I use.

I often have students asking me how I can type so fast ... truth is, I don't. I use plugins for VSCode. Let me share 3 cool ones with you right now.

Broadly, how does your Browser get hold of the HTML page from the servers to display on your computer? This lecture gives you a high level overview of how this happens, and also shows you what it means to run a local server on your machine.

We have already been writing JavaScript in this course, but mostly within the console that is provided to us by the browser. Now its time to start including it in our HTML which is what you will do when you are creating real websites.

Where can you write your JS code.

Enough talk! Lets see real example of how you can include <script> tags within your HTML.

As we have discussed, you can include JavaScript both inline (that is, you can write your JavaScript within your HTML document), or external (that is, in another file). Lets see a practical example of using JavaScript inline.

Remember, the Browser will parse your HTML document from the top to the bottom, in that order. This means where you place your JavaScript matters. Lets see why.

We know that the Browser parses your code from top to bottom, but sometimes this will result in weird things. Let me ask you a trick question.

In the previous lecture we noticed that the text within the <p> element did not change. But we want it to change. What caused this problem? 

We know what caused the problem, so now lets fix it!

External JavaScript is a lot more common and practical, and will be what you do 99% of the time. Lets jump straight into it.

Learning the JavaScript syntax is very important. I hope you enjoy this section and have a lot of fun.

Learning the grammar of JavaScript is important, just as it is when learning English.

The syntax parser is built into your Browser and goes through your code line by line. It then 'interprets' this into machine code for you.

Most modern languages are flexible enough to ignore white space in your code. This makes it more legible for you and others. But, does JavaScript treat white space the same way? 

In English we have learnt to include a . at the end of each sentence. What do we do with JavaScript, and is it mandatory? 

Keeping your code organised is important, not only for you but your friends, family and colleagues who are helping your with your website.

Data Types are extremely important. Why? Because it tells you what the JavaScript language can do when you are working with different types of values. 

After this lecture you should be starting to get a feel as to why its important to define different data types and what they actually are. Don't be scared with all these fancy words. Primitive just means simple. These data type are ... simple. They are strings (the words you and I type), numbers, booleans, null, undefined and a symbol. Not bad hey!

We've worked a lot with Strings already, but here is yet another example.

JavaScript allows you to access properties (aka: additional functionality) on values. You'll learn how to access these properties. An example is also given.

JavaScript only has 1 type of number, being a Float. But what exactly is a Float and how does JavaScript store these numbers? 

Because JavaScript uses floating point numbers, this can cause some weird results. Lets find out why.

We have just seen that 0.1 + 0.2 does NOT equal 0.3. Weird right. To find out why, you need to understand the difference between Base 10 and Base 2 number formats. As we know, computers can only speak in Binary code. But what does this exactly mean? 

The Number data type is very important, and by the end of this lecture you should start feeling a lot more comfortable with using it.

We have seen String data types, Number Types. Now lets learn about Null and Undefined.

As I explained, null is a primitive data type in JavaScript. So you may be wondering why typeof(null) returns an object? 

Every programming language has it's special characters - characters that mean something special. JavaScript is no exception, as it provides a number of functions that encode and decode special characters. One of these methods is using the \ key, which tells the interpreter that the next character has a special meaning.

The definition of an operator is a symbol that is used to perform a task. Most often these operations are what you and I learnt at school (addition, subtraction, etc), but not always. There are others you need to know about too.

A unary operator is an operation with only one operand, and a binary operator is an operation with two operands.

Coercion is extremely important, because you need to understand how JavaScript treats and deals with data.

JavaScript is a language full of surprises, especially when it comes to how it handles different types of data. One sneaky feature is coercion, where JavaScript automatically converts values from one type to another behind the scenes. This can be helpful sometimes, but often it leads to bugs and unexpected behavior — and that’s why understanding the difference between implicit and explicit coercion is so important.

Welcome to the section on Variables.

Variables are the names you give to computer memory locations which are used to store values.  Why is this important? Well, say you want to store two values, "Wally" and "Warthog", in your program and at a later stage you want to use these two values. To do this, you need to store these values somewhere. This is where variables come into the picture.

The first step is to understand the role of variables and what they do.

The process of creating a Variable is not as simple as it may first seem. Your computer has to go through 3 distinct steps when creating a variable.

Part of becoming an awesome programmer is having the ability to write good code. Knowing what you should and shouldn't call variables is therefore very important.

Creating variables consists of declaring that variable, initializing it, and then finally assigning a value to it. But before we move onto the preferred ways to declare variables (LET and CONST), it is good for you to understand the old-school way of doing so with the VAR keyword. A VAR has function scope (VAR declares a variable that's visible throughout the function) even though it looks like it has block scope. We'll get into more detail on scope later.

Up to ES5, JavaScript had only had 2 types of scope - function scope and global scope. This caused a lot of frustration for developers coming from other languages like Java, C or C++. JavaScript lacked block scope ... that is, until LET came along!

const addresses the need of developers to associate a fixed, or 'constant' name with a given value such that the value can’t be changed. For example, if you’re working with math formulas, you may want to create a constant that stores the value of π and e.

Constants defined with const follow the same scope rules as those defined with let, but they can’t be redeclared. Constants are also block-scoped instead of function-scoped. Confused? Good. Lets dive in.

The differences between VAR, LET and CONST can be complex. Good news? I have an entire course that digs deeper into this.

Here is a practical example of using the Try, Catch block to understand const in more detail.

VAR => never use

LET => use when you're okay with re-assigning the variables value

CONST => use as much as possible

Scope refers to which parts of your program can see or use variables.

Normally, every variable has a global scope.  This means that once defined, every part of your program can access it.  But in many cases it is useful to be able to limit a variable's scope to a single function.

Because JavaScript only used to have the VAR keyword, it was often considered to be a function scope language. However, with the new let and const syntax, JavaScript is now considered to be a block scope language.

A practical example of the differences between scope when it comes to using the VAR and LET keyword.

Sometimes your code can get so complex, that it becomes very cumbersome to try figure out which scope you're in at different parts of your code. This is where DevTools can help you. Lets dive in.

want to know more about Variables under the hood? then check out my variables course.

Lets start simple - with a vanilla system alert that is activate on a click of a button.

Remember, your code is parsed from top to bottom, so any code we write after the alert will be executed.

What if we want to write some JavaScript code that is different for when a user clicks on Yes or Cancel. This lecture shows you how.

A Prompt is an inbuilt function that takes 2 arguments. It is basically a way for you to ask the user to input some value.

We've seen the custom system alert object, but now lets take this a little further and create our own custom designed alert.