Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Master JavaScript - The Most Complete JavaScript Course 2022

Name: Master JavaScript - The Most Complete JavaScript Course 2022
Rating: 4.4 (86 reviews)

Master JavaScript 2022!Projects, challenges, JavaScript ES6, ES7, ES8 ,ES9, ES10, ES11, OOP, AJAX, Webpack,Laravel

Created byRick Sekuloski

Last updated 2/2022

English

English [Auto],

What you'll learn

Master JavaScript

Course content

19 sections • 181 lectures • 45h 32m total length

0- How to get maximum from this course6:04
1. Javascript Intro1:25
Begin your JavaScript journey with this intro, recognizing JavaScript is essential today and can be challenging. Practice the exercises beyond the course and think like a real developer.
2. Javascript Origins3:14
3. Javascript Types19:15
Learn JavaScript types by exploring numbers, strings, and booleans, with hands-on practice in console logs, type conversion, concatenation, and escaping quotes, plus setup tips for VS Code and browser experiments.
4. Javascript Comparsion Operators11:07
Explore JavaScript comparison operators, including greater than, less than, greater or equal, and not equal, with explanations on strict equality by value and type.
5. Javascript Variables16:06
6. Javascript Conditions And Logical Operators34:48
7. Javascript Functions14:11
8. Javascript Arrays19:28
9. Javascript Objects20:31
Explore JavaScript objects as the second data structure, using properties and dot notation to access values, and manage arrays of objects, empty objects, empty arrays, and methods.
10. Solution For Exercise 711:57
11. Javascript Terminology9:52
12. Javascript Loops, For, Foreach, While, Do While16:49
13. Exercise 9 Solutions15:22
14. Javascript Scope9:25

1. Dom & Javascript Engine11:18
2. Dom Selectors33:00
Explore how to select DOM elements using tag name, class name, id, and query selectors; manipulate attributes, class lists, and content, and understand caching for efficient DOM access.
3. Dom - Selectors 220:11
4. Dom - Creating New Html Element9:08
Create a new list element with document.createElement, set its class and id, assign text content, create and append a span, then append the item to the ul using appendChild.
5. Dom - Events14:51
6. Dom - Events 227:21
7. Dom - Mouse Events9:10
8. Dom- Keyboard Events11:07
Explore dom keyboard events in javascript, including keydown, keyup, focus, blur, and cut and paste, with hands-on practice wiring input listeners and inspecting event properties like key and keyCode.
9. Event Bubbling And Delegation14:45

1. Introduction5:17
Explore the importance of ECMAScript 2015 features and how Babel enables transpiling newer code to widely supported JavaScript across browsers, bridging background knowledge and modern development.
2. Advanced Es6 Features Let & Const, Destructoring, Template Literals, Arrow Fn38:21
3. Lexical Environment, Closures, Compose Fn, Currying20:04
4. Advanced Array Methods23:32
5. Obejcts Reference Type, Context, This Keyword, Classes, Inheritance, Const27:25
6.Pass By Value And Pass By Refrence, Promitive & Non-Primitive, Spread Operator36:09
7. Type Coercion16:32
Explore how JavaScript uses type coercion to convert values between data types, and compare with the three equals sign versus the double equals sign, including practical examples from the lecture.

1. Json12:47
2. Ajax- Without Page Refresh Using Fetch15:29
Master how Ajax updates pages without a refresh by exchanging data with servers using fetch. Use promises and JSON to handle responses and access data on the client side.
3. Callback, Anonymous Fn, Callback Hell, Asynchronous Fn24:36
Master JavaScript explains callbacks and asynchronous programming, including anonymous functions and setTimeout, highlighting non-blocking execution, callback hell, and how promises solve it.
4. Promises33:23
5. Es7 Features10:19
7. Es8 Features Like Padstart, Padend, Object Values And Object Entries16:57
8.Async Await28:20
9. Es9 - Spread Operator5:45
Explore es9 features in ecmascript 2018 by using the spread operator for arrays and objects, passing array elements as function arguments, and extracting rest values to manage car stock data.
10. Es9 Finally, For Await Of23:35
11. Es10 Features Including Trimstart && Trimend14:36
12. Modules, Export And Import26:31
Learn how JavaScript modules organize code through named and default exports, and how to import them with various syntax, while discussing bundlers, Babel, and browser support.
13.Es11 - 2020 Javascript Features33:29
14. Es11 Features 28:45

0. Important Lecture - How To Get Maximum Of This Course5:11
The course/resource files are not in this lecture they are located in Lecture 1. JavaScript Fundamentals.
Sorry for the confusion. I cant put the lectures in the free preview lecture.
1. Javascript Fundamentals, Environment Setup, Our First Index File Created8:15
Explore JavaScript fundamentals and set up your development environment, from choosing a text editor to launching a local server and creating your first index file.
2. Difference Between Inline And External Js Files9:43
3. Primitive JavaScript Data Types And Alert Box10:25
4. Variables Naming Convention Rules5:10
5.Variable Mutation And Javascript Coercion, Plus Defining Multiple Variables8:55
6.Logical Operators, Math Operators, Types Of, Prompting Users For Information18:41
7.Operator Precedence15:21
Explore operator precedence in JavaScript through hands-on examples, showing how brackets, unary negation, and arithmetic operators interact, and how the precedence table determines evaluation order.
8.Coding Assignment, Weight Converter4:07
9. JavaScript If Else Statements7:09
Master if else statements in JavaScript by learning how conditions trigger actions and how the else block handles alternative paths. Explore booleans, true or false values, and practical examples.

1.JavaScript Dom and Dom Manipulation4:05
2. Document Object and Its Properties23:48
3.Single Query Selectors getElementById and qyerySelector25:11
4. DOM Selectors for Multiple Elements22:02
5. DOM, Parents, Siblings, Previous,26:58
Learn to traverse the DOM by selecting and manipulating lists with querySelector and querySelectorAll, access children, first and last elements, and navigate the HTML collection, parent and sibling relationships.
6. EventListeners onClick & Mouse over13:41
7.Mouse Events13:03
8.Local Storage And Session Storage12:08
Learn to use local storage and session storage in JavaScript to setItem, getItem, removeItem, and clear key-value data, noting local storage persists after close and session storage does not.
9.Create Element's, Constants and Variables18:10
10. Mini Project Our To Do List1:30
11. JavaScript Working on Our To Do List App, Display the list elements16:20
Learn to build a dynamic to-do list by creating and displaying list items, handling form submission, and storing tasks in local storage using JSON, with DOM manipulation.
12. Displaying Items From Localstorage and Delete Items on Clear9:06
Display items stored in local storage with a forEach loop, synchronize the UI, and implement a clear button that removes items from the DOM and local storage.
13. To Do List App Finished17:28
14. Event Bubbling and Event Delegation18:01

0. Run To 20, Dice Game With JavaScript4:06
1. Project Walkthrough, and Setting your Js file15:22
2. QuerySelector, getElementById, ClassList To Add classes to our dice game9:30
3.Roll the Dice with Random number and displaying it on GUI11:55
Trigger the roll dice button to generate a random number from one to six with Math.random and Math.floor, then display the corresponding dice image on the GUI.
4. Toggle Between Player Status, Calculate Their Dice Number For Each Player and13:44
Toggle between active players, calculate each player's dice roll, and update per-player and final scores using display logic and a ternary operator, stopping when a player reaches twenty.
5. Build the Blocks in Payer Score Board Using Function and Loops14:14
6. Reset, Announcing Winner, And Smart Way to Stop The Game From Running20:37

1.JavaScript Object Inheritance And The Property Chain11:29
2. Objects, Inheritance And Prototype Chaining28:22
3. Console Log, Inspecting Arrays, Properties And Prototypes14:55
4. Object Create In JavaScript8:12
5. Primitives Vs Objects13:52
6. This Keyword , Constructor And Global This Keyword8:46
7. JavaScript Built In Constructors10:38
Explore JavaScript built-in constructors: string, number, boolean, and regular expressions, and how the new keyword creates objects, not primitives, with === and == comparisons.
8. Important, Example Of First Class Functions26:02
Discover first-class functions in JavaScript by treating functions as objects: pass them as arguments, store them in variables, and return them via callbacks, illustrated with array and date examples.
9. Javascript Returning Functions9:45
10. IIFE- Immediately Invoked Function Expression9:26
11. Closures, Closure Function Behind Scenes15:51
13.Call, Apply And Bind Methods24:01

1. Project Walkthrough And What We Are Building-19:53
2. HTML Markup, CSS, JS, Sass, Font-Awesome Explained11:38
3. Architecture, Modules, Data Encapsulation, To Do List First Section9:26
Learn modular architecture by structuring a to-do list app into graphical user interface, calories, and main modules, connected by a bridge main controller to manage data encapsulation and interactions.
4. Setting The Architecture And Three Modules For Our App12:53
5.Add Event listener & KeyPress Listener For our Form Submission13:34
6. Read Form Data, Connect Main With Ui Controller And Use Class Names Object18:24
Read form data and connect the main controller with the UI using a public getFormData function. Centralize class names in a private object to maintain type, description, calories, and quantity.
7.Clean The Code And Group Event Listeners8:07
8. Using Parsefloat, Parseint, Isnan To Prevent Wrong Form Values To Be Submited13:32
9. Function Constructors For Add And Burn Calories Plus How To Store The Data10:36
10. Adding Calories And Storing Inside Our Storage Array16:05
11. Storing New Calories With Unique Id Inside Our Storage12:16
Learn to dynamically store calories with a unique id in storage, compute the next id from the last entry, and handle the zero-length scenario.
12.Display The Calorie Item From Storage To UI23:30
Learn to fetch stored calories and display them in the UI by returning the calorie object from the app UI controller, building type-specific markup, and injecting it with DOM manipulation.
13. Display Notification For Food Or Exercise Calories Plus Motivational Talk14:15
14. Calculate Added ,Burned Calories Return And Store Their Values, Long Lecture30:14
14. Display The Result In Front UI22:29
15. Finishing The Remaining Calories Front UI9:20
16. Second To Do List, Congratulations On The Finishing The First Part2:30
17. Delete Calories Event Delegation, Parent Node, Select Food And Exercise Ids20:34
18. Delete Calories From Storage, Ui And Update The Front UI19:15
19. Last Stage Planning And Outlining Our Coding Points2:31
20. Display Date Name, Month Name Using Date Function, Reset Everything24:30
21.Format Calories To Include Decimal Point And Comma21:35
Learn to format calories with two decimals and thousands separators using string manipulation and encapsulated private functions, applying tests in the calories controller.
22. Use The Functions And Display The Results On From UI7:33
23. Clear Form , Error Notification and Clean The Code17:29

1. Welcome To ES6 What We Will Cover3:01
Explore ES6 features, including blocks and let/const, rest and spread, maps, classes, and default parameters. Understand browser compatibility and why ES6 matters for modern JavaScript, with promises and native modules.
2. New Way Of Declaring Variables Let And Const24:47
Explore how to declare variables with let and const, understand when to mutate values, and compare function scope versus block scope, including the temporal dead zone in ES6.
3. ES5 Vs ES6 Blocks And Iffes, Data Encapsulation13:08
Explore ES5 and ES6 blocks and IIFEs, and learn how block scope enables data encapsulation and privacy, contrasting function scope with curly-bracket blocks.
4. String Methods, Template Literals Using Backtick17:54
Explore template literals with backticks for easy string construction, interpolation with ${}, and multi-line output, using string methods like startsWith, endsWith, and repeat.
5. Arrow Function, With Single Or Multiple Arguments21:39
6. A JS Break, Looking into Sass, Css, Bem, Box Shadows & Create A Traffic Light29:27
Learn to design a traffic light from scratch using css and sass, apply box-shadow techniques, border-radius, flexbox layout, bem naming, and gradient mesh visuals.
7.Lexical This Keyword25:03
8. Destructuring Data Sets11:30
9.For Of, Findindex, Find, Array.From16:35
Explore for of loops, break and continue, and how to use findIndex, find, and Array.from to search arrays, convert node lists, and manipulate traffic-light style examples.
10. Spread Operator, Arrays And NodeLists11:04
11.Rest Operator6:18
12. Default Parameters15:17
Learn how default parameters preset function arguments to avoid undefined values, using simple defaults and the ternary operator to handle missing inputs in a JavaScript function constructor example.
13. JavaScript Maps23:57
14. Classes, Synthetic Sugar Over Prototype Property17:29
15. Subclasses & Inheritance Explained With Person Actor Class22:00

Requirements

No requirements or prerequisites

Description

Course Requirements

In order to follow me in this course, no coding experience is necessary, I will take you from the very beginning and will turn you into an expert.
During this course, I'm using Windows but any OS will work — Windows, macOS, or Linux. Together we will set up the text editor we need to for the course.
It is always recommended to have a basic understanding of HTML and CSS, that will be helpful but not a must! The course also includes a section of CSS, SASS, HTML intro so you can navigate easily.

Description

*** The #1 Complete JavaScript course on Udemy! ***

JavaScript is the leading #1 programming language and the question is do you want to master it?

If you are tired of wasting your time and money on watching random YouTube videos or taking JavaScript courses that are not complete, simple, or complex?

Are you struggling to deeply understand ow JavaScript really works behind the scenes and how to apply your knowledge to real projects?
If the answer to my previous questions is YES... Then this is the course that will change all of that. This is what you have been looking for so long!

What this course will cover?

This is not just a JavaScript course, this course will offer you much more, modern CSS, HTML, and JavaScript practices. All of the current versions of JavaScript are included.
I will take you from being a complete JavaScript beginner to be a professional advanced developer. This course will help you learn how JavaScript works and how to code, solve problems, and debug. Along the course, you will learn how to structure and organize code using common JavaScript patterns, module patterns, and modern Architecture.

So, what are you waiting for come and join me on this awesome journey where I explain everything on the way with great detail and a large number of exercises!

This course will help you to understand how, and why JavaScript code is working. Where to apply your knowledge and how to be a perfect debugger, to train your eye for mistakes and fix them.
Now I want to be clear this course will contain a lot of coding challenges, projects, and theory lectures. So, you need all of these in order to build real-world projects.
This course is different because it's not just about writing code, it's also about how and why code works the way it does. Because it's the perfect mix between theory and practice. Because it focuses not only on small coding examples but also on real-world projects and use cases.
This will empower you to be a capable JavaScript Developer so you can write, understand, and debug JavaScript code using all the latest techniques that we will cover.

What will be covered in this course

In short all of the versions staring from ES5, ES6, ES7, ES8, ES9, ES10, ES11, and any ESNEXT version,

JavaScript fundamentals like:

variables,
data types
Boolean logic
if/else statements
loops
ternary operators
functions
objects
arrays
and my hands are tired of typing but much more.

In order to understand JavaScript and how it truly works behind the scenes, you will learn in-depth about

Execution contexts
scoping
the 'this' keyword,
and more....

JavaScript and Website Interaction-one of my favorite parts:

DOM manipulation
Select and change Webpage Elements,
DOM Events.

We will cover much more complex features like

Function constructors
Prototypal inheritance
First-class functions
Closures,
The bind and apply methods, and more.....

•At this stage we are having chance to code up 3 beautiful real-world apps where you can apply your knowledge and learn the new concepts

(Note provided the starter HTML and CSS code for these projects).

• Design is a very important and elegant thing so you will learn how to use

modules and functions so you can separate your code and that will allow you to create data privacy and encapsulation, and why that is something very important.

•What's new in ES6 / ES2015 the biggest update for JS.

•You will learn about Asynchronous JavaScript: the event loop, promises, async/await, AJAX calls and APIs, promise all, Promise Race, Promise Reject, Promise settled.

• Modern JavaScript 2020 where you will learn how to set up a modern development workflow using Node.js NPM, Webpack, Babel, and ES6 modules.

So, is this course the right one for you?

Student #1: I want to gain a deep understanding of how JavaScript works and I would love to learn as much as I can: I want to learn JavaScript.

Student #2: I have taken another JavaScript course but they are confusing and hard so:

1) still don't really understand JavaScript

2) still don't feel confident to code real-world apps. Then there is no brainer take this course it will be a perfect match for you!

Student #3: I'm interested in using popular libraries/frameworks like React, Angular, or Node.js but I can't understand how they work.

1) Well, JavaScript is the one that needs to be taken before using popular libraries. This course will give you the knowledge to learn them all.

Student #4: You want to get started with web development: Them Master JavaScript is a great course where you can learn JavaScript language and learn how to code.

Still not sure?

Access to HD quality videos for life.
No monthly subscription.
Learn at your own pace, whenever you want, how much you can.
English Language captions provided by Udemy.
All resources are available like the starter and final code for each section. Lectures are also included
Q&A when you have questions or get stuck.
Multiple coding challenges to apply and practice your skills (solutions included).

Now if this sounds like a good option for you then please lets both you and I start this adventure today by clicking the “Take this course" button, and join me in the only JavaScript course that you will need!

Who this course is for:

This course is for someone that wants to gain
deep understanding of the most popular programming language in the world: JavaScript.
If you are a student and want to learn a web development language that sits in the first 4 always
If you're interested in using popular libraries/frameworks like React, Angular, or Node then you need this course.
In general: JavaScript is a great language to learn how to code and that makes this course irresistible.

Who this course is for:

From Zero to Hero, Go From Beginner to an Advanced JavaScript developer
3 Amazing real-world apps you can code, starting from with both ES5 and going all to ES11+ (Real World Apps)
JavaScript Fundamentals: Variables, boolean logic, if/else, loops, functions, arrays, etc
Asynchronous JavaScript: The event loop, promises, async/await, AJAX and APIs, JSON, HTTPS
Modern Features like the 'this' keyword, function constructors, prototypal inheritance, first-class functions, closures
Promise all, Promise settledAll, Promise Race, Promise Reject, Promise Resolve
Modern JavaScript for 2020: NPM, Webpack, Babel and ES6 modules, Architecture
Understand How JavaScript Really Works Behind the Scenes
What is new in ES6
What is new in ES7
What is new in ES8
What is new in ES9
What is new in ES10
What is new in ES11
ES6: arrow functions, classes, default and rest parameters, etc.
Coding Challanges
To Do List App
LocalStorage
Movie API Project
Amazing opportunity to learn how CSS, SASS and HTML work behind the scenes
DOM Manipulation
Fetching Data From Remote API async/await
Q&A
Module Patterns
Export and Import
BigInt

Master JavaScript - The Most Complete JavaScript Course 2022

What you'll learn

Explore related topics

Course content

JavaScript - Genesis New Course15 lectures • 3hr 30min

JavaScript DOM - Metamorphosis NEW Course9 lectures • 2hr 31min

Advanced JavaScript - Supernova New Course7 lectures • 2hr 47min

JavaScript - Stellar New Course13 lectures • 4hr 15min

JavaScript Fundamentals10 lectures • 1hr 33min

JavaScript HTML DOM Manipulation14 lectures • 3hr 42min

Dice Game Run To 207 lectures • 1hr 29min

Advanced JavaScript Objects and Functions12 lectures • 3hr 1min

Burny - Calorie App24 lectures • 5hr 52min

ES6- ES2015 Next Generation JavaScript15 lectures • 4hr 19min

Requirements

Description

Who this course is for: