
This course includes our updated coding exercises so you can practice your skills as you learn.
See a demo
Master JavaScript from basics to expert through 60 hours of real-world projects, including DOM manipulation, ES6 features, object oriented programming, asynchronous code, and modern tooling.
Watch before you start explains how to engage with the course by coding along, completing coding challenges, taking notes, using the Q&A, and pacing yourself with playback speed.
Install Visual Studio Code, the recommended free cross-platform editor, to start coding. Configure Monokai Pro, auto save on focus change, and format on save for cleaner code.
Begin the complete JavaScript course by learning the language fundamentals, including variables, data types, operators, and if-else statements. This section provides an overview before building user interfaces later.
Use the browser console to write and test JavaScript basics, including alert with hello world, declaring variables with let, simple if statements, and basic arithmetic.
Explore what JavaScript is and what it does, including its role as a high-level, object-oriented, multi-paradigm language that powers dynamic web pages with HTML and CSS.
Learn to download starter code from GitHub, create and link an external JavaScript file to an HTML page, run it in the browser, and view console output.
Explore values and variables in JavaScript, learn how to declare and reuse variables, understand camelCase conventions, safe naming rules, and how console.log displays values.
Learn about JavaScript primitive data types—number, string, boolean, undefined, null, symbol, and BigInt—and how dynamic typing assigns types to values, with the type of operator revealing a value’s type.
Explore the three JavaScript variable declarations - let, const, and var - learn when to mutate values, why const is preferred by default, and why var should be avoided.
Explore basic operators in JavaScript, including arithmetic, assignment, and comparison, and learn to use variables, console logs, booleans, and template strings to perform age calculations and string concatenation.
Explore operator precedence in JavaScript, learn how math operators run before comparisons, distinguish left-to-right from right-to-left evaluation, and see how parentheses and assignment shape expressions like the average age.
Calculate and compare Mark and John's BMI using const values, compute BMI with height squared, log results to the console, and validate with test data.
Learn how to build strings with template literals in JavaScript, using backticks and ${} placeholders to insert variables and expressions, and create multi-line strings effortlessly.
Learn if/else statements and conditional logic in JavaScript by building decisions like driver's license eligibility, using booleans, template literals, and control structures.
Refactor the BMI comparison with an if/else statement to print who has the higher BMI and log both values using a template literal.
Master type conversion and type coercion in JavaScript, manually converting with Number() and String(), and understanding automatic coercion across numbers, strings, and booleans, including NaN.
Explore truthy and falsy values in JavaScript, including zero, empty string, undefined, null, and not a number, and see how boolean coercion governs if-else logic with money and height examples.
Explore strict (===) and loose (==) equality in JavaScript, and how type coercion affects comparisons. Learn to convert strings to numbers with Number() and use if, else if, else blocks.
Explore boolean logic with true and false values, and learn how the and, or, and not operators combine booleans using truth tables and practical examples.
Explore how JavaScript logical operators and, or, and not combine boolean variables like has drivers license and has good vision to decide if Sarah should drive.
Compute dolphins and koalas averages from three scores, log results, then compare with if/else and apply bonus rules requiring at least 100 points and draws.
Explore the switch statement as an alternative to long if/else chains, using a day-to-activity example with cases, breaks, a default, and strict equality.
Discover the difference between expressions and statements in JavaScript, where expressions produce values and statements perform actions, with examples like arithmetic, booleans, and declarations.
Explore the conditional (ternary) operator in JavaScript, using a one-line expression to replace if/else for simple decisions and to embed conditionals in template literals.
The lecture demonstrates a video solution for calculating tips with a ternary operator, using a 50–300 bill for 15% or 20% otherwise, then logs the bill, tip, and total.
Trace the history of JavaScript releases from ES5 to ES6+ and ESNext. Learn how backwards compatibility, development versus production, and transpiling with Babel enable modern code in real browsers.
Continue learning JavaScript fundamentals by mastering functions, objects, arrays, and loops. Build a solid foundation to start writing your own small programs with JavaScript.
activate strict mode in JavaScript by placing 'use strict' at the start of the script to reveal errors, prevent silent failures, and improve code security.
Master how functions create reusable blocks of code, using parameters and return values, and learn to invoke them with arguments. Explore examples like a fruit processor.
Explore function declarations and function expressions in JavaScript, learn how parameters and arguments map to returns, see anonymous functions, and understand hoisting and practical usage differences.
Arrow functions are a concise ES6 form of function expressions, shorter to write with implicit return for simple cases, and they lack a this keyword.
Master how to call one function from another in JavaScript, using a fruit processor that cuts fruit into pieces to demonstrate data flow and the DRY principle.
Review functions by converting arrow functions to normal function expressions, composing calcAge with another function, and clarifying parameters, return statements, and the data flow across declarations, expressions, and calls.
Master arrow functions by building a reusable three-number average, test with dolphins and koalas data, and implement a standalone winner checker that tests double-point rules and logs results.
Explore arrays as JavaScript's core data structure, learning to create, access, and mutate arrays with literals and the Array constructor. Use length and last-element tricks, and store mixed types.
Learn essential array methods in JavaScript, including push, unshift, pop, shift, indexOf, and includes, with mutating behavior and returns of new length or removed elements, plus ES6 insights.
Create a calcTip function using a function expression or arrow function, applying 15% for bills 50–300 and 20% otherwise, then build tips and totals arrays.
Learn how to use objects in JavaScript to name data with key–value pairs, turning an array into an object with properties like first name, last name, age, job, and friends.
Master retrieving and adding object properties with dot and bracket notation, use dynamic keys and computed property names, and access arrays via length and [0].
Explore how to assign functions as object methods and use the this keyword to access data, compute ages, and build practical summaries like getSummary in JavaScript objects.
Create objects for each person with full name, mass, and height, then implement a calcBMI method that stores and returns BMI using mass divided by height squared.
learn how to use the for loop in JavaScript to automate repetition with a counter, condition, and update, producing dynamic strings via template literals.
Explore looping arrays with a for loop, use array length to log elements, build a types array with type of, and demonstrate continue and break for flow control.
Learn to loop an array backwards and nest a loop inside another, then run three exercises with five repetitions each using a template literal.
Learn how the while loop works in JavaScript and how it differs from the for loop. Compare counter-based and counter-free approaches, including rolling dice until a six using random numbers.
Calculate tips and totals from a bills array using a loop and the calc tip function, then build a generic calc average to compare average tips and totals.
Plan your unique journey through the complete JavaScript course using section roadmaps and seven learning-goal pathways to prioritize essential videos, skip optional ones, and learn faster.
Explore how to learn to code, think like a developer, and debug your JavaScript projects. Learn to set up a professional development environment on your own computer.
Configure VS Code with Prettier, set Prettier as the default formatter, enable format on save, and create a snippet to auto insert console.log.
Learn to set up a live-reloading dev environment for JavaScript by using the live server extension or a node.js npm package, and verify automatic browser reload on code save.
Set clear, measurable learning goals and reinforce concepts by coding hands-on challenges. Learn with others, share progress, and persist through the cliff of confusion toward becoming a job-ready web developer.
Develop a developer mindset by solving problems with four steps: understand the problem, divide and conquer, research when stuck, and draft pseudo-code before coding, e.g., reversing strings, numbers, or arrays.
Calculate temperature amplitude as the difference between the highest and lowest values, ignoring sensor errors, then merge arrays with concat using Google, Stack Overflow, and MDN for research.
Learn to debug by identifying and fixing bugs, using the console and debuggers, and preventing future issues with automated tests and broader code checks.
Explore debugging in JavaScript by using the console to fix kelvin conversion bug from input caused by prompt returning a string, and breakpoints and Chrome debugger to step through code.
Implement a printForecast(arr) that converts array of forecast temperatures into a string, uses three dots as separators, labels days with index plus one, and logs degrees Celsius to the console.
The rise of ai tools like ChatGPT, GitHub Copilot, and Cursor AI Code Editor reshapes web development, teaching you to craft prompts, test generated code, and retain fundamental programming skills.
Apply a five-step ai-assisted process to solve challenge #2 by building analyzeWorkWeek for a freelancer time tracker. Receive a week’s daily hours, return totalHours, averageHours, maxDay, daysWorked, and isFullTime.
Build a quick foundation in HTML and CSS with a concise crash course. If you already know the basics, skip ahead to the upcoming projects in the course.
Learn the basics of html structure and elements, including html, head, body, title, h1 and p tags. Explore attributes, doc type, and the live server preview in VS Code.
Learn how attributes describe HTML elements, distinguish inline and block elements, and use href, src, class, and id attributes to build semantic HTML and simple forms.
Learn the basics of CSS styling, including inline and external styles, element, class, and id selectors, inheritance of font properties, and using borders and colors to design a webpage.
Explore the CSS box model, including content, padding, border, margin, and fill area. See how global reset with the star selector and box-sizing border-box affect sizing and layout.
Build your first visual user interface as we create three beautiful projects to learn the basics of DOM manipulation and make JavaScript interact with real web pages.
build a guess my number app that picks a secret number between 1 and 20, reduces score by one per wrong guess, and preserves highscore on restart.
Learn how JavaScript interacts with web pages through the DOM, manipulating HTML elements, text, attributes, and CSS using web APIs.
Master the document object model by selecting and manipulating elements with querySelector, reading and setting text content, updating the score, and controlling input values.
Attach a click event listener to the check button, read the input, convert it to a number, and log the guess or a no number message to the console.
Implement the game logic by defining a secret number with Math.random, handling correct, too high, and too low guesses, and updating a score state that decreases on wrong attempts.
Learn to manipulate css styles via the dom by changing the page background color and the number's width when the player wins, using querySelector and style properties.
Implement the again reset functionality for the number guessing game by hiding the secret number until win, resetting score to 20, clearing the guess, and restoring styles for replay.
Implement and display a high score system by tracking a high score variable and updating it when the current score exceeds it, then render the new high score.
Refactor duplicated code to follow the dry principle, unifying conditions for high/low guesses and centralizing messaging using a ternary operator. Implement a display_message function to reduce repetition and improve readability.
Create a modal window with an overlay that opens from three buttons and closes via a close button, outside click, or Esc; use hidden class, querySelectorAll, and a for loop.
Learn to manipulate elements with JavaScript by attaching click event listeners to buttons, toggling visibility with classList add and remove, and refactoring with reusable open and close modal functions.
Learn to listen for keyboard events with document.addEventListener('keydown'), inspect the event object's key property, and close the modal when Escape is pressed if the modal is not hidden.
Build a two-player pig game in JavaScript, implementing dice rolling, hold-to-score, player switching, and flowchart planning for clear, practical gameplay development.
Implement the dice rolling feature: generate a random roll, display the dice image, and add to the current score unless the roll is one, which switches to the next player.
Switch the active player (0 or 1), update the current score for the active player, and store both players' scores in an array.
Implement holding the current score in a two-player dice game: add to total, switch players, and declare a winner at 100, with a playing state to disable controls.
Reset the game at any point by clearing all scores, removing the winner and active states, and reinitializing with an init function to restore initial conditions.
Take a behind-the-scenes look at how JavaScript truly works. You gain the ability to write better code and understand other developers' code by embracing theory.
Master the big picture of JavaScript as a high-level, prototype-based, multi-paradigm language with first-class functions, dynamic typing, and a garbage-collected, single-threaded, non-blocking event loop.
Discover how the JavaScript engine executes code, from parsing to just-in-time compilation, and how browser and Node.js runtimes expose web APIs, the call stack and heap, and the event loop.
Learn how JavaScript executes code in the global and function execution contexts, and how the call stack tracks these contexts. Understand the variable environment, this, and the arguments object.
Explore how lexical scoping, global, function, and block scopes shape variable access in JavaScript, and how the scope chain enables variable lookup across outer scopes.
Explore JavaScript scoping in practice, tracing global, function, and block scopes and the scope chain, and see how var, let, const and strict mode shape access.
Explore how hoisting works in JavaScript under the creation phase, revealing how function declarations, var, let, and const differ, and how the temporal dead zone prevents premature access.
Explore hoisting in practice by comparing var, let, and const, and examine how temporal dead zone and function declarations versus expressions impact code behavior.
Explore how the this keyword in JavaScript changes with how a function is called—method, normal function, or event handler—and its lexical behavior in arrow functions.
Discover how the this keyword behaves in global scope, strict mode, regular functions, arrow functions, and methods, including lexical this and method borrowing.
Explore how regular and arrow functions handle this and scope, uncover common pitfalls, and learn best practices for methods, the this keyword, and the arguments object.
Explore memory management in JavaScript by distinguishing primitives and objects, understanding the heap and call stack, and learning how references affect copies and mutations.
Explore object references through practical code, distinguishing shallow copies from deep copies using spread operator and structuredClone, and learn how passing objects by reference affects originals.
Learn how JavaScript automatically frees memory using garbage collection and mark-and-sweep, covering roots, call stack, heap, and memory leaks from timers and event listeners.
Continue exploring modern JavaScript, building data structures like objects, maps, and arrays, mastering ES6+ features such as destructuring, optional chaining, and string handling, laying foundation for upcoming sections and projects.
Learn array destructuring, an ESX feature, in modern JavaScript using a restaurant example to unpack values, switch variables, return and destructure function results, handle nested arrays, and apply default values.
Explore object destructuring in JavaScript by extracting properties with curly braces, renaming variables, setting defaults, mutating existing vars, and handling nested objects, including passing an object to functions.
Explore how the spread operator expands arrays, enables adding elements, and passes function arguments. Learn how to create shallow copies, merge arrays, and copy objects with ES6 and beyond.
Explore the rest pattern and rest parameters, contrast with the spread operator, and learn how destructuring collects remaining elements into arrays or objects and passes arbitrary function arguments.
Explore short-circuiting with and and or operators, using non-boolean operands and truthy or falsy values to set defaults and trigger code.
Learn how the nullish coalescing operator (??), introduced in ES2020, uses nullish values to set defaults, avoiding defaults from zero or empty strings, and compare it with the or operator.
Learn how the or assignment operator, the nullish assignment operator, and the logical and assignment operator work in ES 2021, using restaurant examples to show default values and short-circuiting.
Apply your learning by building a football betting app that processes game data, uses destructuring and spread to assemble players, and prints goals and odds without if statements.
Loop over arrays with the for-of loop to access each current element without counters. Use entries and destructuring to reveal indices and values, while preserving continue and break.
Explore enhanced object literals in ES6, showing how to shorthand properties from variables, define methods inline, and compute property names with expressions, illustrated by a restaurant example.
Learn how optional chaining (?.) prevents runtime errors from missing nested properties or methods, returns undefined, and pairs with the nullish coalescing operator for safe defaults across objects and arrays.
Learn to loop over object keys, values, and entries with for...of. Destructure values to access open and close and build a string of open days.
Tackle javascript challenge #2 by looping game.scored to log each scorer with goal numbers, compute the average odds from game.odds, and print formatted team odds from the game object.
Explore sets, a JavaScript data structure for unique values, using size, has, add, and delete; learn that sets are iterable, unordered, and ideal for removing duplicates from arrays.
Explore ES2025 set enhancements with intersection, union, difference, symmetric difference, and disjoint, subset, and superset checks, demonstrated on Italian and Mexican foods to show practical array conversions and maps.
Explore maps, a JavaScript data structure where keys can be any type, including objects and arrays; learn to create, set, get, and manage maps with has, delete, size, and clear.
Practice iterating maps in JavaScript by constructing maps from arrays of key value pairs, using object.entries, iterating, handling boolean keys for feedback, and converting maps back to arrays.
Compare the four built-in JavaScript data structures—arrays, sets, objects, and maps—and learn when to use each for ordered lists, unique values, and key-value stores, with JSON data.
Create a unique events array from the gameEvents map, remove the minute 64 yellow card, compute the 90-minute average interval, and label each event as first or second half.
Explore JavaScript string methods, reading characters by index and checking length. Use indexOf, lastIndexOf, and slice with begin and end parameters to extract parts and learn about primitives and boxing.
Learn string techniques in JavaScript, from lowercasing and uppercasing names and emails to trimming whitespace and replacing. Use includes and starts and ends to validate input and baggage checks.
Explore advanced string handling in JavaScript using split, join, and destructuring to capitalize names, reassemble strings, and then pad, mask credit cards, and repeat outputs.
Solve a JavaScript challenge that converts underscore_case to camelCase from a textarea input, producing five outputs and handling spacing and two-word variables with emoji-labeled results.
Transform a messy flights string into a legible, aligned output by splitting, destructuring, and formatting with replaceAll, startsWith, slice, toUpperCase, and padStart.
Explore advanced JavaScript function concepts, including higher order functions, the bind method, and closures, to deepen your understanding before moving on.
Explore default parameters in JavaScript by building a basic airline booking function, comparing ES5 short‑circuiting with ES6 default values, and using prior parameters to compute defaults.
Explore how primitives and objects are passed to functions in JavaScript: primitives copy by value, objects pass by reference, and the distinction between passing by value and by reference.
Explore how JavaScript treats functions as values through first-class functions and harness higher-order functions that receive or return functions, including callbacks and bind usage.
Explore higher-order functions that accept callbacks, create reusable string transformers, and see how patterns like event listeners and for each illustrate abstraction in JavaScript.
Create a function that returns a new function to produce personalized greetings, illustrating closures, functions returning functions, and rewriting with arrow functions.
Learn to bind this using call and apply to reuse a shared booking function across airlines such as Lufthansa and Eurowings. See how this targets the correct airline when booking.
Learn how the bind method creates a new function with this bound to a chosen object, presets arguments for partial application, and enables clean event listener use cases in practice.
Build a JavaScript poll app by wiring a poll object with question, options, and answers; implement register new answer and display results via this binding and events.
Explore immediately invoked function expressions (IIFEs) as a pattern to execute a function right away, create private scope, and protect data, with comparisons to var, let, and ES6 block scope.
Explore how closures let a function access variables from its birthplace via the closed-over variable environment, even after the outer function returns.
Explore how closures capture variables in two examples: reassignment in g and h with a and b, and setTimeout showing access to n and perGroup.
Practice closures by attaching a body click event to an iife, changing the h1 color to blue, and explaining how the callback preserves the header variable.
The #1 bestselling JavaScript course on Udemy!
Just updated with ES2024 and ES2025!
"Really, really well made course. Super in-depth, with great challenges and projects that will solidify your Javascript understanding. I found the lectures were paced perfectly -- Jonas doesn't skip over anything that might be useful to a JS developer" — Carson Bartholomew
JavaScript is the most popular programming language in the world. It powers the entire modern web. It provides millions of high-paying jobs all over the world.
That's why you want to learn JavaScript too. And you came to the right place!
Why is this the right JavaScript course for you?
This is the most complete and in-depth JavaScript course on Udemy (and maybe the entire internet!). It's an all-in-one package that will take you from the very fundamentals of JavaScript, all the way to building modern and complex applications.
You will learn modern JavaScript from the very beginning, step-by-step. I will guide you through practical and fun code examples, important theory about how JavaScript works behind the scenes, and beautiful and complete projects.
You will become ready to continue learning advanced front-end frameworks like React, Vue, Angular, or Svelte.
You will also learn how to think like a developer, how to plan application features, how to architect your code, how to debug code, and a lot of other real-world skills that you will need in your developer job.
And unlike other courses, this one actually contains beginner, intermediate, advanced, and even expert topics, so you don't have to buy any other course in order to master JavaScript from the ground up!
But... You don't have to go into all these topics. This is a huge course, because, after all, it's "The Complete JavaScript Course". In fact, it's like many courses in one! But you can become an excellent developer by watching only parts of the course. That's why I built this course in a very modular way, and designed pathways that will take you through the course faster.
By the end of the course, you will have the knowledge and confidence that you need in order to ace your job interviews and become a professional developer.
Why am I the right JavaScript teacher for you?
My name is Jonas, I'm an experienced web developer and designer, and one of Udemy's top instructors. I have been teaching this bestselling course since 2016 to over 850,000 developers, always listening to feedback and understanding exactly how students actually learn.
I know how students learn JavaScript and what they need in order to master it. And with that knowledge, I designed the ideal course curriculum. It's a unique blend of real-world projects, deep explanations, theory lectures, and challenges, that will take you from zero to an expert and confident JavaScript developer in just a couple of weeks.
So what exactly is covered in the course?
Build 5 beautiful real-world projects for your portfolio! In these projects, you will learn how to plan and architect your applications using flowcharts and common JavaScript patterns
Master the JavaScript fundamentals: variables, if/else, operators, boolean logic, functions, arrays, objects, loops, strings, and more
Learn modern JavaScript (ES6+) from the beginning: arrow functions, destructuring, spread operator, default arguments, optional chaining, and more
How JavaScript works behind the scenes: engines, the call stack, hoisting, scoping, the 'this' keyword, reference values, and more.
Deep dive into functions: arrow functions, first-class and higher-order functions, bind, and closures.
Deep dive into object-oriented programming: prototypal inheritance, constructor functions (ES5), classes (ES6), encapsulation, abstraction, inheritance, and polymorphism. [This is like a small standalone course]
Deep dive into asynchronous JavaScript: the event loop, promises, async/await, and error handling. You will use these to access data from third-party APIs with AJAX calls. [This is like a small standalone course]
Learn modern tools that are used by professional web developers: NPM, Parcel, Babel, and ES6 modules
Check out the course curriculum for an even more detailed overview of the content :)
This is what's also included in the package:
Up-to-date HD-quality videos, that are easy to search and reference (great for Udemy Business learners)
Professional English captions (not the auto-generated ones)
Downloadable starter code and final code for each section
Downloadable slides for 40+ theory videos
25+ coding challenges and 25+ assignments to practice your new skills
Does any of these look like you? If so, then start this adventure today, and join me and 850,000+ other developers in the only JavaScript course that you will ever need!