Modern JavaScript from the Beginning - Second Edition

Video description

This course is a comprehensive introduction to JavaScript, covering everything from the basics of variables, data types, and methods, to more advanced topics such as asynchronous programming, object-oriented programming, and unit testing.

Starting with the fundamentals of the language, the course progresses through a series of carefully structured sections that build on each other to give you a solid understanding of JavaScript’s capabilities and how to use them effectively. You will learn how to work with arrays and objects, write functions, and use logic and control flow to create more complex programs.

From there, the course dives into more advanced topics such as DOM manipulation, event handling, and asynchronous programming, teaching you how to use these techniques to create responsive and interactive web applications. You will also learn about object-oriented programming in JavaScript, including constructors, prototypes, and classes, and build several projects along the way to put your new skills into practice.

The course also covers more advanced topics such as modules, iterators, and generators, as well as unit testing and data structures. Additionally, you will get hands-on experience with tools like Webpack and Node.js, giving you a well-rounded understanding of modern JavaScript development.

By the end of the course, you will have a solid foundation in JavaScript and be able to build dynamic, interactive web applications using the language. Whether you are just starting out with programming or are looking to expand your skillset, this course is the perfect way to learn JavaScript from the ground up.

What You Will Learn

  • Create and manipulate variables, data types, methods, and objects
  • Understand control flow, loops, and iteration in JavaScript
  • Build web applications using DOM manipulation and event handling
  • Use asynchronous JavaScript to make web applications more efficient
  • Implement object-oriented programming principles in JavaScript
  • Build real-world projects such as a shopping list app and movie app


This course is designed for beginners who are new to programming and have little to no experience with JavaScript. It is also suitable for anyone who wants to refresh their knowledge of JavaScript and its fundamentals. This course is ideal for web developers who want to enhance their skills and build dynamic and interactive web applications. Additionally, anyone interested in pursuing a career in front-end development or web design would find this course helpful. Finally, those who want to gain experience with modern JavaScript tools and frameworks, such as Node.js and React, would benefit from this course as it provides a strong foundation in JavaScript programming.

About The Author

Brad Traversy: Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad’s courses.

Table of contents

  1. Chapter 1 : Course Introduction
    1. Welcome to the Course
    2. Course Outline and Projects
    3. What Is JavaScript?
    4. Tools and Setup
    5. Running JavaScript in the Browser
  2. Chapter 2 : Variables, Data Types, Methods, and More
    1. Section Introduction
    2. The Sandbox Files
    3. Using the Console
    4. Comments and Shortcuts
    5. Variables and Constants
    6. Data Types
    7. Primitive Versus Reference Types
    8. Type Conversion
    9. Operators
    10. Type Coercion
    11. Working with Strings
    12. Capitalize Challenge
    13. Working with Numbers
    14. The Math Object
    15. Number Challenge
    16. Dates and Times
    17. Date Methods and DateTimeFormat API
  3. Chapter 3 : Arrays and Objects
    1. Section Introduction
    2. Creating Arrays
    3. Basic Array Methods
    4. Nesting, Concat and the Spread Operator
    5. Array Challenges
    6. Object Literals
    7. Object Spread Operator and Methods
    8. Destructuring and Naming
    9. JSON Introduction
    10. Object Challenges
  4. Chapter 4 : Functions, Scope, and Execution Context
    1. Section Introduction
    2. Creating a Function
    3. More on Arguments and Parameters
    4. Global and Function Scope
    5. Block Scope
    6. Nested Scope
    7. Declaration Versus Expression
    8. Arrow Functions
    9. Immediately Invoked Function Expressions (IIFE)
    10. Function Challenges
    11. Execution Context
    12. Execution Context in Action
    13. The Call Stack
  5. Chapter 5 : Logic and Control Flow
    1. Section Introduction
    2. If Statements
    3. Else-If and Nesting
    4. Switches
    5. Calculator Challenge
    6. Truthy and Falsy
    7. Logical Operators
    8. Logical Assignment
    9. Ternary Operator
  6. Chapter 6 : Loops, Iteration, and High-Order Array Methods
    1. Section Introduction
    2. For Loop
    3. Break and Continue
    4. While and Do While Loops
    5. FizzBuzz Challenge
    6. For...of Loop
    7. Loop
    8. Array.forEach Method
    9. Array.filter Method
    10. Method
    11. Array.reduce Method
    12. Array Method Challenges
  7. Chapter 7 : DOM Manipulation
    1. Section Introduction
    2. Introduction to the DOM
    3. Document Element Properties
    4. DOM Selectors - Single Elements
    5. DOM Selectors - Multiple Elements
    6. Traversing the DOM - Elements
    7. Traversing the DOM - All Nodes
    8. Create and Append Elements
    9. InnerHTML Versus createElement()
    10. Refactor to Multiple Functions
    11. Insert Elements, Text, and HTML
    12. Custom insertAfter() Challenge
    13. Replace Elements
    14. Remove Elements
    15. Manipulating Styles and Classes
  8. Chapter 8 : Events
    1. Section Introduction
    2. Event Listeners
    3. Mouse Events
    4. The Event Object
    5. Keyboard Events and Key Properties
    6. KeyCode Mini-Project
    7. Input Events
    8. Form Submission and FormData Object
    9. Event Bubbling
    10. Event Delegation and Multiple Events
    11. Page Loading and Window Events
  9. Chapter 9 : Shopping List Project
    1. Section Introduction
    2. Add Items to List (DOM Only)
    3. Setting Up Git and GitHub (Optional)
    4. Remove and Clear Items
    5. Clear UI State
    6. Filter Items
    7. Local Storage Crash Course
    8. Add Items to Local Storage
    9. Display Items from Local Storage
    10. Remove Items from Local Storage
    11. Set Item to Edit
    12. Update Item and Reset State
    13. Prevent Duplicate Items
    14. Deploy to Netlify
  10. Chapter 10 : Asynchronous JavaScript
    1. Section Introduction
    2. Under the Hood: Thread of Execution
    3. Under the Hood: How Async JS Works
    4. setTimeout and clearTimeout Functions
    5. setInterval and clearInterval Functions
    6. Callbacks
    7. Crash Course on HTTP Requests
    8. DevTools Network Tab
    9. AJAX and XHR Object
    10. Joke Generator Project Challenge
    11. Callback Hell
    12. Promises
    13. Callback to Promise Refactor
    14. Promise Chaining
    15. Promises Versus Callback Hell
    16. Handling Multiple Promises with promise.all()
  11. Chapter 11 : Fetch API and Async Await
    1. Section Introduction
    2. Fetch Basics
    3. Random User Mini-Project
    4. Fetch Options - Method, Body Headers
    5. Typicode Todos Mini-Project - Part 1
    6. Typicode Todos Mini-Project - Part 2
    7. Fetch API Error Handling
    8. Async and Await
    9. Try...Catch Statements
    10. Error Handling with Async and Await
    11. Multiple Promises with Async and Await
  12. Chapter 12 : Flixx Movie App Project
    1. Section Introduction
    2. Theme Overview and Prep
    3. API Overview and API Key
    4. Page Router and Active Link
    5. Display Popular Movies
    6. Spinner and Popular TV Shows
    7. Movie Details Page
    8. Details Page Backdrop
    9. TV Show Details Page
    10. Swiper Slider
    11. Search Functionality
    12. Display Search Results
    13. Add Pagination for Search
  13. Chapter 13 : Web Browser APIs
    1. Section Introduction
    2. GeoLocation API
    3. Show Location on a Map
    4. Canvas Element and API
    5. requestAnimationFrame() Method
    6. Animated Clock - Part 1
    7. Animated Clock - Part 2
    8. Web Audio API
    9. Music Player Project
    10. Drum Machine Project
    11. Video API
    12. Video Player Project
    13. Web Animations API - Ball Project
    14. Speech Recognition API - Color Say Project
    15. Speech Synthesis API - Text to Speech
  14. Chapter 14 : OOP - Constructors and Prototypes
    1. Section Introduction
    2. What Is OOP?
    3. Basic Principles of OOP
    4. More on Object Literals and this Keyword
    5. Constructor Functions
    6. Literals Versus Built-In Constructors
    7. Working with Object Properties
    8. Prototypes and the Prototype Chain
    9. Adding Methods to the Prototype
    10. Using Object.create()
    11. Prototypical Inheritance and call()
    12. OOP Game Challenge
  15. Chapter 15 : OOP - Classes, Getters, Setters, and Private Properties
    1. Classes
    2. Class Inheritance
    3. Static Methods
    4. bind() and Defining this
    5. Getters and Setters with Classes
    6. Getters and Setters with defineProperty()
    7. Private Property Underscore Convention
    8. ES2022 Private Class Fields
    9. Property Flags and Descriptors
    10. Sealing and Freezing Objects
  16. Chapter 16 : Tracalorie App (OOP Project)
    1. Project Introduction
    2. UI Theme Setup
    3. Project Planning and Diagram
    4. Base Tracker, Meal, and Workout Class
    5. Display Tracker Stats
    6. Progress Bar and Calorie Alert
    7. App Class, New Meal, and Workout
    8. Refactor to Single _newItem Method
    9. Display New Meal and Workout
    10. Remove Meal and Workout
    11. Filter and Reset
    12. Set Calorie Limit
    13. Storage Class and Calorie Limit Persist
    14. Persist Total Calories to Local Storage
    15. Save Meals to Local Storage
    16. Save Workouts to Local Storage
    17. Remove Meals and Workouts from Local Storage
    18. Clear Storage Items
  17. Chapter 17 : Modules and Tooling
    1. Project Introduction
    2. What Are Modules?
    3. Installing and Using Node.js
    4. CommonJS Modules
    5. NPM Packages/Modules
    6. ES Modules
    7. Module Bundlers
    8. Webpack Basic Setup
    9. CSS and Style Loaders
    10. HTML Webpack Plugin
    11. Webpack DevServer Plugin
    12. Babel Setup
    13. CSS Minify Extract Plugin
    14. Tracalorie Refactor to Use Webpack
    15. Deploy Tracalorie to Netlify
  18. Chapter 18 : Iterators, Generators, and Data Structures
    1. Section Introduction
    2. Symbols
    3. Iterators
    4. Generators
    5. Profile Scroller Project
    6. Sets
    7. Maps
    8. Poll Project
    9. Stacks
    10. Queues
    11. Linked Lists
  19. Chapter 19 : Unit Testing Algorithms
    1. Introduction and What Are Algorithms?
    2. What Is Unit Testing?
    3. Getting Started with Jest
    4. Grouping Tests Together
    5. Reverse String Algorithm
    6. Palindrome Algorithm
    7. Array Chunking
    8. Anagram Algorithm
    9. Get Elements by Tag - jsdom
    10. Has Duplicate IDs - jsdom
  20. Chapter 20 : Node.js Modules (Bonus Module)
    1. Section Intro
    2. fs (filesystem) Module
    3. path Module
    4. os Module
    5. url and querystring Modules
    6. http Module
  21. Chapter 21 : RandomIdeas Project - Backend REST API (Bonus Project)
    1. Section Introduction
    2. Express Setup and Basic API
    3. Nodemon and Route Clean-Up
    4. Handle POST Requests - Add Idea
    5. PUT and DELETE Requests - Update and Remove Ideas
    6. What Is MongoDB?
    7. MongoDB Atlas Setup
    8. Mongoose Connect and Dotenv
    9. Mongoose Schema and Model
    10. Database Queries
  22. Chapter 22 : RandomIdeas Project - Webpack Frontend (Bonus Project)
    1. Fullstack Workflow
    2. Client Folder Setup
    3. Modal Component
    4. IdeaForm Component
    5. IdeaList Component
    6. API Service - Fetch Ideas
    7. Create Idea through Form
    8. Save Username to Local Storage
    9. Add Username Validation to Server
    10. Delete Ideas
    11. Deploying a Fullstack App

Product information

  • Title: Modern JavaScript from the Beginning - Second Edition
  • Author(s): Brad Traversy
  • Release date: April 2023
  • Publisher(s): Packt Publishing
  • ISBN: 9781805127826