Free Online Course · Self-paced · Hands-on

Modern JavaScript Tutorial (ES6+ Hands-On)

Free JavaScript tutorial for beginners: 120+ runnable lessons on ES6+ syntax, arrays, objects, classes, async/await, the DOM, and common error fixes.

  • 14 chapters
  • 122 lessons
  • ~14h
  • Beginner to Intermediate
  • Tested with Node.js 20.18.x
  • Updated Sep 2026
Start the course View syllabus
Modern JavaScript Tutorial (ES6+ Hands-On)
By Last updated

About this course

This is a free, self-paced course in modern JavaScript, meaning ES2015 (ES6) and later, from strict mode and the equality rules through classes, promises, and the DOM. It teaches the language as the current ECMAScript specification defines it and skips the legacy quirks you only need when maintaining old code. The final chapter is a set of fixes for the errors beginners hit most often, such as "Cannot use import statement outside a module".

Most lessons were run in Node.js before publishing, and each snippet is followed by a short note on what the console should print. That makes it easy to spot when your result differs, and to tell whether the cause is your code or a difference between Node.js and the browser. Lessons that need a page mark which snippets only work in a browser.

If JavaScript is new to you, start with strict mode and work through the chapters in order. If you already write it, jump to the arrays chapter, async and await, or DOM manipulation and events.

What you'll learn

  • Explain strict mode, scope, and the difference between == and ===
  • Work with numbers, Math, strings, template literals, and regular expressions
  • Add, remove, copy, sort, and deduplicate arrays with the right built-in method
  • Clone, merge, and destructure objects, and convert them to and from JSON
  • Write arrow functions, default parameters, and first-class functions, and loop with for...of and for...in
  • Build classes with inheritance and apply the singleton and observer patterns
  • Handle asynchronous code with promises, async/await, Promise.all(), and timers
  • Select and change DOM elements, handle events, and fix the JavaScript errors beginners hit most often

Who this course is for

  • Beginners who know some HTML and CSS and want to make a page respond to clicks, keys, and form input
  • Developers from Python, Java, or PHP who keep tripping over ==, this, and asynchronous code
  • Front-end developers who learned a framework first and want to understand the plain JavaScript under it
  • Anyone heading to Node.js who needs promises and async/await to feel natural before touching a server

Prerequisites

  • A current Chrome, Firefox, or Edge with DevTools, which is enough to run most snippets in the console
  • Node.js on Linux, macOS, or Windows for running snippets from files; install a current LTS release
  • Basic HTML and CSS for the DOM and events chapter
  • No build tools, bundlers, or frameworks; only a few lessons pull in a library such as jQuery

Versions and testing environment

Every command in this course was run on this stack

ComponentVersionNotes
Node.js 20.18.x Most snippets were run in Node.js 20.18.2, with a note after each one describing the console output
Node.js 22.x A few newer lessons, such as type coercion and date handling, were run on Node.js 22 on Linux
jsdom 24.0.0 Supplies a document for DOM snippets outside the browser; a few lessons use happy-dom instead
jQuery 3.7.1 Used only in the jQuery lesson
Browsers — Clipboard, focus, and layout examples also need a real browser, and the clipboard API needs HTTPS

Syllabus

14 chapters · 122 lessons · ~14h of reading

  1. 1 Getting Started 5 lessons · ~23 min
    1. Part 1 use strict mode 2 min read
    2. Part 2 Global variables and scope 5 min read
    3. Part 3 == vs === - the equality rules 6 min read
    4. Part 4 Check if a variable is undefined 6 min read
    5. Part 5 Calling vs invoking a function 4 min read
  2. 2 Numbers and Math 15 lessons · ~41 min
    1. Part 6 Math.abs() 2 min read
    2. Part 7 Math.ceil() 2 min read
    3. Part 8 Math.floor() 2 min read
    4. Part 9 Math.pow() and exponents 2 min read
    5. Part 10 Exponentiation in JavaScript 6 min read
    6. Part 11 Number.toFixed() 3 min read
    7. Part 12 Math.random() 2 min read
    8. Part 13 Math.sqrt() 2 min read
    9. Part 14 Math.max() 2 min read
    10. Part 15 Math.min() 2 min read
    11. Part 16 Math.cbrt() 2 min read
    12. Part 17 Math.fround() 2 min read
    13. Part 18 Round down a number 2 min read
    14. Part 19 Integer division 8 min read
    15. Part 20 <= operator 2 min read
  3. 3 Strings 17 lessons · ~54 min
    1. Part 21 Template literals (backticks) 3 min read
    2. Part 22 String.includes() - contains check 3 min read
    3. Part 23 String.startsWith() 2 min read
    4. Part 24 String.trim() 2 min read
    5. Part 25 String.toLowerCase() 2 min read
    6. Part 26 String.indexOf() 4 min read
    7. Part 27 Replace a substring 3 min read
    8. Part 28 String.replaceAll() 2 min read
    9. Part 29 replaceAll() with regex patterns 2 min read
    10. Part 30 String.trimEnd() Coming soon
    11. Part 31 Variables inside regex patterns 2 min read
    12. Part 32 Convert SRT subtitles to plain text 5 min read
    13. Part 33 Remove the last character of a string 3 min read
    14. Part 34 Convert a string to an array 6 min read
    15. Part 35 Compare strings 7 min read
    16. Part 36 Check if a string is a number 6 min read
    17. Part 37 Validate an email address 2 min read
  4. 4 Arrays 16 lessons · ~1h 4m
    1. Part 38 Add an item to an array 5 min read
    2. Part 39 Array.pop() 5 min read
    3. Part 40 Array.unshift() 3 min read
    4. Part 41 Slice an array 5 min read
    5. Part 42 slice() method reference 2 min read
    6. Part 43 Array.splice() 2 min read
    7. Part 44 Array.join() 6 min read
    8. Part 45 Copy an array 7 min read
    9. Part 46 Remove duplicates from an array 2 min read
    10. Part 47 Remove a specific element 3 min read
    11. Part 48 Flatten a nested array 5 min read
    12. Part 49 Check if an array is empty 6 min read
    13. Part 50 Spread operator (...) 2 min read
    14. Part 51 Sort an array 2 min read
    15. Part 52 Array.findIndex() 4 min read
    16. Part 53 Set and HashSet-style uniqueness 5 min read
  5. 5 Data structures, DOM utilities, and patterns 7 lessons · ~22 min
    1. Part 54 Linked list implementation 4 min read
    2. Part 55 Infinite loops (intentional and accidental) 4 min read
    3. Part 56 XOR operator and bitwise patterns 2 min read
    4. Part 57 Create and manipulate SVG 2 min read
    5. Part 58 Detect ad blockers in the browser 6 min read
    6. Part 59 Simulate Tab key events 2 min read
    7. Part 60 Conditional logic with jQuery 2 min read
  6. 6 Objects, JSON, Destructuring 9 lessons · ~46 min
    1. Part 61 Object literals 4 min read
    2. Part 62 Check if a key exists in an object 9 min read
    3. Part 63 Object.hasOwnProperty() 4 min read
    4. Part 64 Clone an object 6 min read
    5. Part 65 Deep copy an object 8 min read
    6. Part 66 Merge objects 3 min read
    7. Part 67 Object and array destructuring 8 min read
    8. Part 68 JSON.stringify() with pretty-print 2 min read
    9. Part 69 JSON.parse() 2 min read
  7. 7 Functions 5 lessons · ~20 min
    1. Part 70 Arrow functions 5 min read
    2. Part 71 The arguments object 5 min read
    3. Part 72 Optional parameters and defaults 2 min read
    4. Part 73 Functions as values (first-class) 5 min read
    5. Part 74 Recursion (factorial example) 3 min read
  8. 8 Control Flow and Loops 5 lessons · ~24 min
    1. Part 75 Nullish coalescing (??) 5 min read
    2. Part 76 Double-negation (!!) for boolean coercion 5 min read
    3. Part 77 forEach vs for...in vs for...of 8 min read
    4. Part 78 Loop through an object's keys 4 min read
    5. Part 79 for loop with index 2 min read
  9. 9 Classes and OOP 5 lessons · ~17 min
    1. Part 80 JavaScript classes 6 min read
    2. Part 81 Subclasses and extends 3 min read
    3. Part 82 instanceof operator 3 min read
    4. Part 83 Singleton pattern 2 min read
    5. Part 84 Observer pattern 3 min read
  10. 10 Async - Promises and async/await 10 lessons · ~33 min
    1. Part 85 async / await 5 min read
    2. Part 86 Promise.all() 2 min read
    3. Part 87 Promise.race() 5 min read
    4. Part 88 Promise.resolve() 3 min read
    5. Part 89 Promise.reject() 3 min read
    6. Part 90 Chain promises with .then() 2 min read
    7. Part 91 Wait for async work to finish 2 min read
    8. Part 92 setTimeout() 4 min read
    9. Part 93 Wait N seconds in JavaScript 2 min read
    10. Part 94 Run a function every second (setInterval) 5 min read
  11. 11 Date and Time 5 lessons · ~20 min
    1. Part 95 Get the current date 5 min read
    2. Part 96 Add days to a date 4 min read
    3. Part 97 Format dates 7 min read
    4. Part 98 Convert a date to ISO string 2 min read
    5. Part 99 Compare dates 2 min read
  12. 12 DOM Manipulation and Events 15 lessons · ~59 min
    1. Part 100 Get a DOM element 3 min read
    2. Part 101 querySelector / querySelectorAll 3 min read
    3. Part 102 Get and set textContent 4 min read
    4. Part 103 Element.replaceWith() 2 min read
    5. Part 104 Remove a DOM element 3 min read
    6. Part 105 Node.appendChild() 6 min read
    7. Part 106 Node.insertBefore() 5 min read
    8. Part 107 window.scrollTo() 2 min read
    9. Part 108 Redirect to a URL 3 min read
    10. Part 109 Open a new tab from JS 3 min read
    11. Part 110 addEventListener() 7 min read
    12. Part 111 Keyboard events 6 min read
    13. Part 112 Mouse events 3 min read
    14. Part 113 Event bubbling explained 4 min read
    15. Part 114 Copy to clipboard 5 min read
  13. 13 Error Handling 3 lessons · ~8 min
    1. Part 115 try / catch / finally 3 min read
    2. Part 116 return vs throw 3 min read
    3. Part 117 Throw custom errors 2 min read
  14. 14 Common Errors and Troubleshooting 5 lessons · ~34 min
    1. Part 118 Fix: Cannot use import statement outside a module 8 min read
    2. Part 119 Fix: Maximum call stack size exceeded 2 min read
    3. Part 120 Fix: Cannot set headers after they are sent 9 min read
    4. Part 121 Fix: Objects are not valid as a React child 3 min read
    5. Part 122 Fix: ipython is not defined 12 min read

Hands-on labs

5 guided builds you run yourself

  1. Build and traverse a linked list

    Define a list node, build a singly linked list forwards and backwards, then traverse it and remove nodes.

  2. Convert SRT subtitles to plain text

    Strip cue numbers and timestamps with regular expressions and write the clean transcript to a file with Node's fs module.

  3. Build an event bus with the Observer pattern

    Publish and subscribe to events with EventTarget and a callback list, and remove listeners so they do not leak.

  4. Validate email input in a form

    Combine input type="email" with a regex check and test it against valid and invalid addresses.

  5. Add a copy-to-clipboard button

    Copy text with navigator.clipboard.writeText(), handle NotAllowedError, and see why the call needs a secure context.

Where to go after this course

  • MDN JavaScript GuideMozilla's reference for every built-in object and method, with browser support tables.
  • Node.js courseRun the same language on the server with files, HTTP, Express, and databases.
  • Git coursePut your practice projects under version control and learn the branch and pull request workflow teams use.

Frequently Asked Questions

What is the difference between JavaScript and ECMAScript?

ECMAScript is the standard, published by Ecma International as ECMA-262 and developed by the TC39 committee. JavaScript is the language browsers and Node.js implement from that standard. A new edition comes out every year. ES2015, also called ES6, added let, const, arrow functions, classes, and modules, which is why "ES6+" is shorthand for modern JavaScript. The current edition is ES2026, approved in June 2026.

Should I run the examples in the browser or in Node.js?

Either works for the language chapters. Paste a snippet into the DevTools console, or save it as a file and run it with node file.js. The DOM chapter needs a page, so use a browser there or load the sample HTML into jsdom. For Node.js, install the current LTS release, which is Node.js 24. Node.js 20 reached end of life in March 2026, so do not start new work on it.

Is JavaScript the same as Java?

No. They are unrelated languages that share part of a name. JavaScript is dynamically typed and runs in browsers and Node.js. Java is statically typed and compiles to bytecode for the Java Virtual Machine. If Java is what you need, the Java course starts from the beginning.

Do I need jQuery or a framework to work with the DOM?

No. Modern browsers support querySelector(), addEventListener(), classList, and fetch() directly, which covers most of what jQuery was used for. The DOM chapter uses plain JavaScript only. Frameworks such as React or Vue make more sense after you understand events and asynchronous code, because they are built on both.

Should I learn TypeScript instead of JavaScript?

Learn JavaScript first. TypeScript is a superset of JavaScript that adds type annotations and compiles back to plain JavaScript, so everything in this course still applies. Once you are comfortable with objects, classes, and promises, TypeScript's types are much easier to read.

Deepak Prasad

R&D Engineer

Founder of GoLinuxCloud with 15+ years of expertise in Linux, Python, Go, Laravel, DevOps, Kubernetes, Git, Shell scripting, OpenShift, AWS, Networking, and Security. With extensive experience, he excels across development, DevOps, networking, and security, delivering robust and efficient solutions for diverse projects.

Expertise
  • Go (programming language)
  • Python (programming language)
  • DevOps
  • Computer Security
  • Cloud Computing
  • Kubernetes
  • Linux
  • Ansible (software)