Learn JavaScript Correctly - Beginner to Advance
JavaScript is a must-know programming language for a modern developer. With clearly explained concepts in short and to the point screencast videos, learn the basic and advanced concepts of modern JavaScript (ES6+ concepts included). Build professional-grade apps and while getting prepared to answer tough interview questions. (Cheatsheets, references, and tools included.)
Course content
131 lessons- 1Tool you will need2:25
- 2History and Background of JavaScript8:06
- 3Understanding Node.js and the browser7:05
- 4Quick intro to text-editors and VS Code4:14
- 5Project Setup2:34
- 6Types in JavaScript - Part 16:17
- 7Types in JavaScript - Part 24:15
- 8Intro to Objects in JavaScript5:24
- 9Creating Variables and accessing values5:59
- 10Using the 'typeof' operator4:03
- 11Basic Vocabulary in JavaScript6:40
- 12Dynamic vs. Static Type Languages2:02
- 13Intro to Arrays in JavaScript4:54
- 14More on Arrays: Weird Parts and Length2:40
- 15Type Checking Arrays1:25
- 16Intro to Functions in JavaScript - Part 16:02
- 17Intro to Functions in JavaScript - Part 25:44
- 18Intro to Functions in JavaScript - Part 35:40
- 19Deeper Realizations on Object, function and method5:30
- 20Project: Simple Age Calculator6:02
- 21Function Statement vs. Function Expression3:58
- 22Hoisting: How and when variables are created.7:01
- 23Function Hoisting4:52
- 24Scope in JavaScript - Part 14:57
- 25Scope in JavaScript - Part 23:02
- 26Scope Chain: The hierarchy of scope.3:45
- 27Lexical Environment (Lexical scope) in JavaScript6:00
- 28Code formatting and coding ethics6:31
- 29Arithmetic Operators in JavaScript5:46
- 30Assignment Operators in JavaScript3:19
- 31Logical Operators in JavaScript5:59
- 32Triple Equal '===' operator6:23
- 33Double Equal '==' Operator4:31
- 34Comparison Operators in JavaScript2:39
- 35Conversion Operators in JavaScript4:42
- 36Increment '++' and Decrement '--' operators2:35
- 37Operator Precedence in JavaScript4:01
- 38Operator Associativity in JavaScript4:12
- 39if else statement in JavaScript7:03
- 40Ternary Operator in JavaScript2:47
- 41Switch statements in JavaScript5:26
- 42For loop in JavaScript - Part 16:54
- 43For loop in JavaScript - Part 25:21
- 44While loop in JavaScript4:15
- 45Do while loop in JavaScript2:34
- 46Creating variables with 'var', 'let' & 'const'4:52
- 47More on 'const'2:40
- 48'setInterval' & 'clearInterval'3:40
- 49'setTimeout' & 'clearTimeout'1:25
- 50Call Stack, Event Loop and Message Queue - Part 15:25
- 51Call Stack, Event Loop and Message Queue - Part 24:41
- 52Call Stack, Event Loop and Message Queue - Part 36:37
- 53Call Stack, Event Loop and Message Queue - Part 43:39
- 54Callback functions in JavaScript2:23
- 55Special 'arguments' keyword in a function3:56
- 56Using 'arguments' in a function3:45
- 57Spread Operator '...' in JavaScript5:00
- 58Default values of function parameters4:56
- 59By Reference, by value7:49
- 60Browser API - Part 14:03
- 61Browser API - Part 26:03
- 62DOM: Document Object Model4:47
- 63Query the DOM nodes5:35
- 64Modify DOM nodes6:30
- 65Modify element class(es)4:17
- 66Create Node/Elements for the DOM6:37
- 67Remove Node from DOM5:02
- 68Events: Adding event listeners to DOM6:21
- 69Removing event listeners from DOM6:56
- 70Project: To-Do List App with Vanilla JavaScript - Part 14:46
- 71Project: To-Do List App with Vanilla JavaScript - Part 22:01
- 72Project: To-Do List App with Vanilla JavaScript - Part 34:28
- 73Project: To-Do List App with Vanilla JavaScript - Part 46:51
- 74Project: To-Do List App with Vanilla JavaScript - Part 52:27
- 75Project: To-Do List App with Vanilla JavaScript - Part 64:39
- 76Project: To-Do List App with Vanilla JavaScript - Part 74:16
- 77Project: To-Do List App with Vanilla JavaScript - Part 83:49
- 78Project: To-Do List App with Vanilla JavaScript - Part 95:17
- 79Project: To-Do List App with Vanilla JavaScript - Part 104:09
- 80To-Do List App Homework - Solution4:03
- 81Event Bubbling in DOM - Part 12:50
- 82Event Bubbling in DOM - Part 25:32
- 83Clear all tasks3:09
- 84DomContentLoaded Event7:30
- 85More on Events + Homework1:28
- 86Global Scope: Avoiding Pitfalls - Part 13:23
- 87Global Scope: Avoiding Pitfalls - Part 25:56
- 88IIFE: Immediately Invoked Function Expression6:42
- 89IIFE Example3:25
- 90Arrow Functions Explained Correctly - Part 17:15
- 91Arrow Functions Explained Correctly - Part 23:10
- 92Closure in JavaScript Explained Correctly - Part 15:06
- 93Closure in JavaScript Explained Correctly - Part 24:04
- 94Closure in JavaScript Explained Correctly - Part 34:34
- 95Project: Tooltip effect - Part 18:48
- 96Project: Tooltip effect - Part 26:07
- 97Project: Tooltip effect - Part 39:00
- 98Project: Tooltip effect - Part 41:48
- 99Project: Tooltip effect - Part 55:06
- 100Template literals (Template Strings) in JavaScript3:55
- 101Prototype: The builtin features6:40
- 102Prototype of String Constructor5:10
- 103Prototype of Number and Boolean Constructor4:38
- 104.filter() method of Array in JavaScript7:31
- 105.filter() method of Array in JavaScript - Part 23:56
- 106.filter() Homework5:59
- 107.find() method of Array in JavaScript1:42
- 108.forEach() method of Array in JavaScript1:11
- 109.map() method of Array in JavaScript4:26
- 110.reduce() method of Array in JavaScript6:36
- 111Date object in JavaScript6:44
- 112Math object in JavaScript4:25
- 113Promise in JavaScript - Part 16:35
- 114Promise in JavaScript - Part 24:53
- 115Promise in JavaScript - Part 38:06
- 116Promise in JavaScript - Part 44:28
- 117Using fetch() to connect with HTTP7:50
- 118Project: Get list of Countries5:53
- 119Project: Get population by country - Part 14:37
- 120Project: Get population by country - Part 25:46
- 121Project + Homework: Get population by country - Part 36:58
- 122'this' - Understand the 'this' keyword once and for all - Part 14:45
- 123'this' - Understand the 'this' keyword once and for all - Part 23:47
- 124'this' - Using call() to modify 'this'4:38
- 125'this' - Using apply() to modify 'this'1:29
- 126'this' - Using bind() to modify 'this'3:00
- 127Avoid Pitfall: 'this' inside an arrow function3:00
- 128Avoid Pitfall: 'this' inside a function inside a method4:37
- 129Using Constructor - Part 18:25
- 130Using Constructor - Part 24:30
- 131'prototype' property of constructor8:21
JavaScript Cheatsheet
Download it, print it and keep it next to your desk.
- Download JavaScript Cheatsheet (PDF)
- Star JavaScript Cheatsheet on Github
- Share Cheatsheet Link: https://ilovecoding.org/blog/js-cheatsheet
Changelog:
Update #4:
Cheatsheet updated to reference concepts of var, let and const
Update #3:
Added additional topics:
- Understanding 'this' keyword
- 3 scenarios that impact the 'this' keyword
- Understanding Constructors function in JavaScript
- When and how to use custom constructors
- Using built-in constructors
- Using Prototype property (to improve performance)
Update #2:
Added additional topics:
- Clear all tasks (From To-Do List App)
- DomContentLoaded Event
- Homework on Events
- Global Scope and Avoiding Pitfalls
- IIFE: Immediately Invoked Function Expression
- Arrow Functions
- Closures
- Project: Tooltip Effect
- Template Literals
- Prototype
- Array methods: .filter() .find() .forEach() .map() .reduce()
- Date
- Math
- Promise
- Fetch
- Project: Get Population By Country
Update #1:
Launched the course with the following main topics:
- Tools and Setup
- History of JavaScript
- JavaScript Engine in Node.js and the Browser
- Types in JavaScript: Primitive and Objects
- Functions, Arrays, Methods, Variables, Expression, Statement
- Type checking
- Static vs Dynamic type languages
- Variable Hoisting & Function Hoisting
- Scope, Scope Chain, and Lexical Environment
- Code Formatting and coding ethics
- Operators: Arithmetic, assignment, logical, comparison etc
- === vs == operator
- setTimeout, setInterval, clearTimeout, clearInterval
- Call Stack, Event Loop, and Message Queue
- "arguments" keyword
- Spread Operator "..."
- Default Parameters
- By reference vs by value
- Understanding the browser + Browser API
- Understanding the DOM
- Query, Create, Update, Delete DOM elements
- Events and Event Listeners
- Project: To-Do List App
- Homework-Solution: To-Do List App
- Event Bubbling
Full Video Transcript
Please ignore typos, it's a computer who transcribed it.
Hello and welcome to probably the best beginner to advanced course on JavaScript on planet Internet. In this course you will go from a complete newbie knowing nothing about programming or JavaScript for that matter to becoming comfortable in building real-world apps; And understanding each line of code that you actually write.
Now before I go further I want to say good job on choosing JavaScript as a programming language to learn. You may already know that JavaScript is the world's most versatile programming language - meaning you can do more things with JavaScript than any other programming language.
JavaScript is used to build web applications, website APIs, backend, front-end, user interfaces for TV's, mobile apps, websites and even airport terminal applications. In fact, I was one of the programmers who built the United Airlines airport terminal application with JavaScript. Well that's a story for another day, but the fact of the matter is you have made a wise choice to learning JavaScript. It's going to serve you well in your career now, and in the long run.
Now let's see what you will be learning in this course:
There are only three goals for this course.
Firstly, have you learn the fundamentals of JavaScript.
Secondly, have you start thinking like a software engineer.
And thirdly, have you start building real-world apps - Someone who can think logically on how to break down problems into logical chunks and build something useful piece by piece.
When learning how to code and there are a few challenges that people encounter. One of the biggest challenges is that programming has a lot of complex words like closure, lexical scope, boolean, array, function, constructor, scope, operators, coercion, public and private functions, and so much more.
Now the thing is that all of these terms look complicated, sound complicated, but if understood simply they're very basic and simple. That's where this course shines. I will not only teach you how to code but I will expose you with these words so you understand them and even start talking like a developer.
The second place where this course shines is that I explain to you things simply. I use easy to understand words and I do not make assumptions that you'll have previous knowledge of other concepts. So everything I teach in this course starts from the baseline and I build your knowledge one lesson at a time until you fully understand all the major concepts.
The third and very important reason why this course will help you better is that I always give you practical examples on when and how to apply your knowledge to build real-world solutions. Many books, blogs, bootcamps, and lectures just go on in the technical conceptual side. In this course, you will learn not just the conceptual side of things but also the practical side on everything you learn. When you tie your learning with examples and real use-cases, your knowledge will actually sink in on a deeper level and you'll be able to become a much better developer in the end.
In this course, we will focus on building a solid foundation of JavaScript. So in the future when you are learning additional technologies your learning will be much more smoother because you have a solid foundation.
In this course. You will learn:
- What is JavaScript and how it's different than other programming languages.
- What are the basic types in JavaScript and how to use them.
- How to use JavaScript to build a website interfaces and backend server-side applications with node.js.
- How to create simple and complex objects to structure your application.
- How to use functions and scope to control the flow of your application.
- How to use the new features of JavaScript like the "spread operator", "const", "let", "promise" and much more.
- We will learn the advanced concepts of "closure", the "this" keyword and really understand them at a very core level, so you are actually a good developer.
- We will learn about the DOM and how to use vanilla JavaScript to build apps.
- We will learn about events and how JavaScript is a single-threaded environment and still extremely fast and performant.
There is a reason why PayPal, Uber, LinkedIn, and many other companies are using JavaScript to build their apps. - We will learn about "arrow function", "coercion", "event loop" and so much more.
- You will learn about how to debug your applications and understand the error messages that you see on the screen.
- You see errors and bugs are common. No app is created without having errors.
So most new developers think that bugs are bad, but actually, they're not. Having bugs or error messages is a normal process in a developers life.
So I will make you comfortable that when you see a bug or an error message you're very comfortable in seeing what it is recognizing it and then fixing the problem. This is just the normal flow of a developers life.
Don't iPhone have bugs? Doesn't Microsoft products have bugs? They are the technology giants. They build technologies so it's a great realization for us to have that bugs are normal. It's our job as a developer to understand these errors and earn how to fix them. I will also show you how to use the dev tools built inside Google Chrome to troubleshoot your apps and resolve bugs.
You will learn how to connect your apps with third-party API and get information from them and use it in your apps. Now keep in mind all these complicated words that I've used so far, you will understand all of them because I will take you piece by piece and explain them all to you. I will give you a cheat sheets homework and examples along the way so you understand all of the concepts.
Along the way you will build a few apps like a "todo list app", a "clock app" a "Tap feature" so you understand things at its core and how to apply these concepts.
Just so this course does not become overly long, you will find a lot of practice projects lessons outside of this course. So in the member's area often of coding so you get a ton of practice on building things and applying your knowledge.
Imagine you finally conquering your fear of coding. Imagine you are finally thinking and building like a software engineer. Imagine your starting or enhancing your career as a software engineer. And imagine finally that your understanding JavaScript at its core and understanding what you see on the screen and building real-world stuff.
If all this excites you, let's get started.