My JavaScript Basics course is now live on freeCodeCamp’s YouTube channel.

The great thing about this course is that it also aligns with the Basic JavaScript Challenges on the freeCodeCamp curriculum. You can practice what you're learning through the videos using the freeCodeCamp challenges. (The course even teaches some concepts that aren’t yet covered in the freeCodeCamp curriculum.)

These videos are designed to quickly give you key information on each topic. Also, I designed them to be as modular as possible. They work fine as stand-alone videos, if you just want to learn about a single topic.

Besides the JavaScript Basics course, I’ve also developed playlists for ES6, Clean Code, Data Structures, Design Patterns, and jQuery. Below are links and descriptions of the videos to help you quickly find exactly what you want to learn.

**Update** My new video course about Algorithms is now live! Check out Algorithms in Motion from Manning Publications. Get 39% off my course by using code ‘39carnes’!

JavaScript Basics (complete course)

View full playlist here.

  1. Variables — Variables are containers for storing data values. This video also covers naming conventions.
  2. Data Types —The seven data types in JavaScript are boolean, null, undefined, number, string, symbol, and object.
  3. Numbers — Working with numbers including adding, subtracting, multiplying, dividing, modulus, increment, decrement, and compound assignment.
  4. String Basics — Strings are a group of characters.
  5. Strings: [bracket notation] — Bracket notation allows you to access a specific character in a string.
  6. 20 String Methods in 7 Minutes — String methods featured in this video: charAt, charCodeAt, concat, endsWith, fromCharCode, includes, indexOf, lastIndexOf, match, repeat, replace, search, slice, split, startsWith, substr, substring, toLowerCase, toUpperCase, trim.
  7. Functions — Functions are one of the fundamental building blocks in JavaScript. This video covers function definitions, names, arguments, parameters, scope, and nesting functions.
  8. Hoisting — Hoisting is when variable and function declarations are processed before any code is executed.
  9. Comparison Operators & If Else —Comparison operators like >, <, =>, and =<. Also, use if / else statements to execute a block of code if a specified condition is true.
  10. == vs === — Differences between abstract and strict equality.
  11. Null vs Undefined — Differences between null and undefined.
  12. Logical operators && TRICKS with short-circuit evaluation —Logical operators are ‘and’ (&&) and ‘or’ (||). These also allow you to do some tricks using short-circuit evaluation.
  13. Ternary Operator — The ternary operator, or conditional operator, takes three arguments and is basically a shortened way of writing an if-else statement.
  14. Switch Statements — Control the flow of your program with switch statements.
  15. Arrays — Arrays are ways to store more than one value in a single variable. This video also covers nested arrays and the forEach method.
  16. Common Array Methods — Learn how to use 10 different array methods: push, pop, concat, join, reverse, shift, unshift, sort, slice, and splice.
  17. Copying Arrays (deep and shallow) — Shallow copy arrays using slice and the spread operator. Deep copy arrays using JSON.stringify.
  18. Random numbers & parseInt — Create random numbers! Also, use parseInt to convert strings to integers.
  19. For Loops — For loops are one of the most common ways to repeat things in JavaScript.
  20. While / Do While — While and do… while are ways to loop over code in JavaScript.
  21. For in / For of — For… in and for… of loops allow you to loop through property names and values in JavaScript.
  22. Array Iteration: 8 Methods — Learn eight methods to iterate through an array in JavaScript! Methods include: forEach, map, filter, reduce, sum, every, find, findIndex.
  23. Objects — Objects are stand-alone entities with properties and types.
  24. Objects, part 2 — Learn more about objects. This video covers using objects for lookups, removing properties using delete, testing for properties, accessing and modifying nested objects, and creating an array of all object keys.
  25. AJAX — AJAX in allows allows you to update parts of a web page without reloading the entire page.
  26. JSON — JSON stands for JavaScript Object Notation. It is a syntax for storing and exchanging data.
  27. this — The keyword ‘this’ refers to the object that “owns” the JavaScript code.
  28. Closures — A closure is the combination of a function and the environment where the function is declared.
  29. Promises — A promise represents the eventual result of an asynchronous operation.
  30. Desktop Notifications — The Notifications API lets a web page or app send notifications that are displayed outside the page at the system level. This lets web apps send information to a user even if the application is idle or in the background.
  31. Immediately Invoked Function Expression — An Immediately Invoked Function Expression (IIFE) is a JavaScript function that runs as soon as it is defined.
  32. Strict Mode — “use strict” — Strict mode in JavaScript tightens the rules for certain behaviors. You can execute JavaScript code in strict mode by using the “use strict” directive.
  33. Check if a property is in an object — How do you check if a property is in an object in JavaScript? Learn three ways in this video. Two of the ways are ‘in’ and ‘hasOwnProperty’.
  34. setInterval and setTimeout: timing events — setTimeout and setInterval are timing events in JavaScript that both allow execution of code at specified time intervals. This quick tutorial shows how to use them.
  35. try, catch, finally, throw — error handling in JavaScript — Error handling in JavaScript uses the keywords: try, catch, finally, and throw.
  36. Dates — Work with dates in JavaScript.

ES6

View full playlist here.

  1. Var vs Const vs Let —Three different ways to declare variables.
  2. Classes — Learn about class expressions, class declarations, and inheritance / extending.
  3. Symbols —Symbols are a unique immutable data type.
  4. Template Literals — Template literals are string literals allowing embedded expressions. These are surrounded by backticks ``.
  5. Proxies — Proxies are used in to give objects custom behavior. One use is for data validation.
  6. …spread operator and rest operator — The spread operator (…) spreads out the elements of an array (or iterable object). The rest operator condenses elements.
  7. Arrow Functions — An arrow function in ES6 has a shorter syntax than a normal function and does not bind its own this.
  8. Destructuring — Destructuring assignment is special syntax for neatly assigning values taken directly from objects and arrays to variables.
  9. Map — Maps are data structures that store key-value pairs. See how they work and learn about the ES6 map object.
  10. import / export (modules) — The import and export statements allow you to break up your code in different files or modules.

DOM (Document Object Model)

View full playlist here.

  1. Selecting & Changing Website Elements — JavaScript allows you to select elements from the DOM of a website and then make changes to those elements.
  2. CSS styles in JavaScript (setting and getting) — How to set CSS properties and styles in JavaScript. Also how to get CSS.
  3. DOM Events — HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.
  4. addEventListener() — The addEventListener() method attaches an event handler to the specified element without overwriting existing event handlers so you can add many event handlers to one element. You can use removeEventListener() to remove an event.
  5. DOM Nodes — This video covers createElement, appendChild, insertBefore, replaceChild, and removeChild.
  6. Animation in the DOM — Animate DOM elements using JavaScript without any frameworks. First you will learn how to create an animation by programming gradual changes in an element’s style. Then learn about the Element.animate() method which is part of the new Web Animations API.
  7. requestAnimationFrame() — The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.
  8. Window Object: move, open, close, & size — The window object represents the browser’s window. It has many properties and methods. This video shows how to use JavaScript to get the size of a window, open a new window, close a window, and move a window.
  9. Pop ups tutorial — JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.
  10. cookies vs localStorage vs sessionStorage — What’s the difference between cookies, local storage, and session storage? They are all ways to store data in a user’s browser but they each have different uses.
  11. Browser history tutorial — Manipulate and navigate the browser history using JavaScript and the window.history object. This video covers history.length, history.back(), history.forward(), history.go(), history.replaceState(), and history.pushState().

jQuery

View full playlist here.

  1. Getting Started with jQuery — jQuery is a very popular, lightweight JavaScript library. jQuery simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. Learn the basic syntax in this video.
  2. jQuery events — In jQuery, most DOM events have an equivalent jQuery method. Learn about jQuery events in this video.
  3. jQuery effects — jQuery makes it easy to add simple effects to your web page. This video covers show, hide, slideUp, slideDown, fadeOut, fadeIn, toggle, stop, and delay.

Clean Code

These videos are all about writing clean code in JavaScript and are based on an article by Ryan McDermott which is based on a book by Robert C. Martin. Clean code is code that is readable, reusable, and refactorable.

View full playlist here.

  1. Variables
  2. Functions (Part 1)
  3. Functions (Part 2)
  4. Objects
  5. Classes
  6. SOLID
  7. Testing, Concurrency, & Error Handling
  8. Formatting and Comments

Data Structures and Algorithms

View full playlist here.

  1. Stacks — Stacks are a last-in-first-out data structure.
  2. Sets — Sets are like arrays but with no duplicate items.
  3. Queues & Priority Queues — Queues are a first-in-first-out data structure.
  4. Binary Search Tree — A binary search tree is a tree data structure with only two branches for every node.
  5. Binary Search Tree: Traversal & Height — Find the height of a binary search tree. Also, use use depth-first and breadth-first search through in-order, pre-order, post-order, and level-order traversal.
  6. Map — Maps are data structures that store key-value pairs. See how they work and learn about the ES6 map object.
  7. Hash Tables — Hash tables are a quick way to implement associative arrays, or mappings of key-value pairs. Find our more and learn how to create one in JavaScript.
  8. Linked List — A linked list is a common data structure where elements are stored in a node. Learn about linked lists and how to implement them in JavaScript.
  9. Trie Data Structure — The trie data structure (sometimes called a prefix tree) is a special type of tree used to store associative data structures. Learn more about tries and how to implement them in JavaScript.
  10. Heap Data Structure (max and min) — A binary heap is a partially ordered binary tree which satisfies the heap property. What is the heap property? Watch the video to find out! Also see how to implement a min heap in JavaScript.
  11. Graph Data Structure Intro — Graphs are collections of things and the relationships or connections between them. The data in a graph are called nodes or vertices. The connections between the nodes are called edges.
  12. Graphs: breadth-first search — Traversal algorithms are algorithms to traverse or visit nodes in a graph. In this video, I will be showing how to implement breadth-first search traversal algorithm in JavaScript. The algorithm starts at one node, first visits all its neighbors that are one edge away, then goes on to visiting each of their neighbors. The point is to determine how close nodes are to a root node.

Design Patterns

View full playlist here.

  1. Singleton — The singleton design pattern limits the number of instances of a particular object to just one.
  2. Observer — With the observer design pattern, if an object is modified it broadcasts to dependent objects that a change has occurred.
  3. Module — The module design pattern in JavaScript is one of the most used designed pattern for keeping particular pieces of code independent from other parts.
  4. Mediator Design Pattern — The Mediator Design Pattern is a pattern that provides a central authority through which the different components of an application may communicate. See an example of this pattern in JavaScript.

React

  1. React Basics— React.js is designed to make the process of building modular, reusable user interface components simple and intuitive. This video introduces React components, the VirtualDOM, JSX, state, and props. See how these things all tie together in a simple shopping list web app.