The Modern JavaScript Bootcamp
4.7 (8,574 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
34,539 students enrolled

The Modern JavaScript Bootcamp

Learn JavaScript by building real-world apps. Includes 3 real-world projects, 80 programming challenges, and ES6/ES7!
4.7 (8,574 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
34,532 students enrolled
Created by Andrew Mead
Last updated 11/2019
English
English [Auto-generated], Polish [Auto-generated]
Current price: $50.99 Original price: $84.99 Discount: 40% off
23 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 29.5 hours on-demand video
  • 128 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn JavaScript by building three real-world web applications
  • Gain a deep understanding of how JavaScript works behind the scenes
  • Explore the latest cutting-edge features from ES6 and ES7
  • Test your skills and gain confidence by completing over 80 coding challenges
  • Learn how to deploy your application to the web so you can share them with everyone
  • Learn how to use Promises and Async/Await with asynchronous JavaScript
  • Get more done by learning how to debug and fix your code when things go wrong
  • Get access to a free 80 page PDF guide with lecture notes, code samples, and documentation links
Course content
Expand all 155 lectures 29:39:09
+ Course Overview
2 lectures 08:44

In this lesson, we'll go over the course curriculum and I'll offer up some tips and tricks for getting the most out of the class!

Preview 07:28

In this lesson, you'll learn a bit about the PDF guide that comes with this class.

Preview 01:16
+ Setting up Your Machine
6 lectures 24:48

In this section, you’ll be setting up your machine for the rest of the course. There are a few things we have to install, and then we’ll start learning how to create JavaScript applications!

Preview 01:03

In this lecture, you’ll install Visual Studio Code. This is the text editor that we’ll be using throughout the course.

Preview 05:25

In this video, you’ll install Node.js. This is going to allow us to run JavaScript files on your machine.

Preview 02:43

This lecture is for Windows users only. You’ll be installing cmder, a console emulator for Windows that’ll make working in the terminal a whole lot easier.

Preview 02:14

In this video, you’ll learn how to use the terminal. We’ll cover some basic commands that’ll make it possible to run JavaScript files from our machines.

Preview 07:52

In this lecture, you’ll create and run your first JavaScript script! We’re not going to dive into any complex JavaScript just yet, but this will verify that everything’s been installed correctly.

Preview 05:31
+ JavaScript Basics: Variables and Flow Control
11 lectures 01:55:35

In this section, you’re going to learn the very basics of JavaScript. We’ll explore the JavaScript syntax and some of the core building blocks that JavaScript provides. By the end of this section you’ll be able to create basic JavaScript programs!

Preview 00:58

In this lecture, you’re going to start learning JavaScript! We’ll kick things off by talking about two important things, variables and strings.

Preview 17:05

In this lesson, you’ll learn about numbers in JavaScript. This includes creating numbers and performing basic arithmetic operations like addition, subtraction, multiplication, and division.

Preview 13:40

In this lesson, you’ll learn a bit more about variables. We’ll talk about the rules for variable naming and I’ll show you a few common traps you’ll want to avoid.

Preview 06:09

In this lesson, you’ll be writing an application from scratch. The application is a temperature converter that converts Fahrenheit to Celsius and Kelvin.

Preview 06:11

In this lesson, you'll learn about our third JavaScript type, the Boolean. You'll also learn how you can compare two things such as two strings or two numbers.

Preview 13:28

In this video, you’ll learn how to use if statements. These will let you conditionally run JavaScript code.

Preview 10:18

In this lesson, we’re going to continue looking at the if statement. We know about “if” and “else”, but there’s also an “else if” available to us.

Advanced If Statements
12:01

In this lecture, you’re going to learn about the logical “and” and “or” operators. These operators allow you to set up more complex conditional logic involving two or more comparisons.

Logical "And" and "Or" Operators
14:53

In this lesson, we’re going to explore variable scope in JavaScript. Variable scope determines where in your program a given variable is accessible.

Variable Scope: Part I
10:38

In this lesson, we’re going to talk about two more scope related topics. The first is shadowing. The second is leaked globals.

Variable Scope: Part II
10:14
+ JavaScript Functions
7 lectures 01:14:07

In this section, you’re going to learn the very basics of JavaScript. We’ll explore the JavaScript syntax and some of the core building blocks that JavaScript provides. By the end of this section, you’ll be able to create basic JavaScript programs!

Section Intro: JavaScript Functions
01:31

In this video, you’re going to create and run your first JavaScript function! Functions are like programs in your programs. It’s a piece of code we can run whenever we want.

Function Basics
16:15

In this video, you’re going to learn about two new types, undefined and null.

Undefined and Null
09:54

In this video, we’re going to take a deeper dive into function arguments. You’ll learn how to set up multiple arguments and come up with default argument values if none is provided.

Multiple Arguments and Argument Defaults
15:46

In this lesson, you’ll explore how scope relates to our functions. The scoping rules we learned in the last section still apply!

Function Scope
04:31

In this lesson, we’ll cover the template string syntax. This will allow you to create a string using other strings, numbers, and Booleans.

Template Strings
12:58

In this lesson, it’s up to you to build a grade calculator. Give the student’s score and the total number of points; you’re going to generate a message that uses the letter grade.

Build a Grade Calculator
13:12
+ JavaScript Objects
10 lectures 01:48:03

In this section, you’re going to learn about objects in JavaScript. Objects allow us to store related information in a single place. This is useful when dealing with something like a user, a book, or a car. We can store all the properties of the book such as the title, author, and number of pages in a single place.

Section Intro: JavaScript Objects
01:17

In this video, you’re going to learn the basics of JavaScript objects. You’ll learn how to create a new object and how to read and modify your objects.

Object Basics
13:02

In this lesson, you’re going to explore how you can use objects with functions. This includes calling functions with object arguments and returning objects from functions.

Using Objects with Functions
11:30

In this video, we’re going to explore what happens when we pass object around our program.

Object References
08:49

In this video, you'll be writing an expense tracker application using what you've learned about JavaScript so far.

Build an Expense Tracker
09:52

In this video, you’re going to learn about methods. A method is nothing more than an object property with a value set to a function.

Methods
13:05

In this video, we’re going to turn our attention from methods we’ve written to methods that are built into the language. The focus will be on methods for our strings.

Exploring String Methods
17:02

In this video, you’re going to explore more of the built-in methods we have access to in JavaScript. Our focus will be on numbers.

Exploring Number Methods
13:50

In this video, you’re going to learn about an alternative way to create variables. This will allow you to better describe what your program is doing.

Constant Variables
08:10

In this video, you’re going to learn about a third way to create variables in JavaScript. While this isn’t a tool I’d recommend using anymore, it’s important to understand, as you’ll likely see it out in the real world.

Bonus: Variables with var
11:26
+ JavaScript Arrays
10 lectures 02:24:20

In this section, you’re going to explore arrays in JavaScript. Arrays allow us to store a list of items. This could be a list of strings, numbers, objects, or any other type in JavaScript.

Section Intro: JavaScript Arrays
01:18

In this video, you’re going to learn the basics of JavaScript arrays. You’ll learn how to create new arrays and how to read items from your arrays.

Array Basics
13:21

In this video, you’re going to learn how to manipulate an existing array. This includes adding, removing, alerting, and replacing array items.

Manipulating Arrays with Methods
13:17

In this video, you’re going to learn how to loop over arrays. This will allow you to do something for each item in your list, such as showing them to your users.

Looping Over Arrays
09:21
The For Loop
16:37

In the next two videos, you’re going to learn how to search for items in an array.

Searching Arrays: Part I
14:49

This video is a continuation of the last one. You’ll continue to explore array searching.

Searching Arrays: Part II
20:41

In this video, you’re going to learn how to filter arrays. Imagine you want to filter all the todos down to just the todos that still need to be completed.

Filtering Arrays
17:45

In this video, you’ll learn how to sort your arrays. It doesn’t make much sense to have completed todos at the top of the list. What if we could keep the completed ones at the bottom and the incomplete ones up top?

Sorting Arrays
18:13

In this video, it’s going to be up to you to build out a new version of our expense tracker.

Improve Our Expense Tracker
18:58
+ Javascript in the Browser
14 lectures 02:47:51

In this section, you’re going to learn how to use JavaScript in the browser. This will let you create website that can request information from the user and render dynamic content. We also start building out the UI for the note taking application and the to-do app.

Section Intro: Javascript in the Browser
01:24

In this video, you’re going to install a web server and create a bare-bones HTML file. By the end you’ll have a URL you can visit in the browser to view the simple website.

Setting up a Web Server
15:12

In this video, you’re going to run JavaScript in the browser. You’ll learn how to connect your script with your HTML so your script runs when the pages load. This will allow you to create dynamic web apps as opposed to static websites.

JavaScript in the Browser
08:14

In this lesson, you’re going to learn about the DOM (Document Object Model). The DOM is what allows you to change what the user sees by modifying the HTML document from JavaScript.

DOM Manipulation
12:13

In this video, you’re going to use what you’ve learned about DOM manipulation.

DOM Challenge
11:13

In this video, you’re going to learn how to add a new element to a web page via the DOM. This is useful when it comes to rendering a dynamic web page. You’ll be using this to render your application data such as the list of to-do items to be completed.

Adding Elements via the DOM
14:25

In this video, you’ll learn how to handle user interaction. This will allow us to respond to things the user does like clicking a button or entering some text in a field.

Handling User Interaction
12:33

In this video, you’re going to learn how to better select DOM elements. Selecting by tag name is great, but that’s not going to work well once we have multiple elements on the page with the same tag name.

Advanced Queries
13:35

In this video, you’re going to set up your first text input. This will allow your app users to type in a value such as their name, email, or anything else.

Text Inputs and Live Data Filtering
12:44

In this video, you’ll explore how to set up live data filtering. This will allow users of the notes app to filter their notes by entering part of the note title in a text input.

Rendering Our Filtered Data
12:35

In this challenge video, you’ll be setting up filter for the to-do application. Get to it!

Todo Filter Challenge
09:58

In this video, you’re going to create your first form. At first, the forms will only use text inputs. Other field types like checkboxes and dropdowns will be explored later in this section.

Working With Forms
17:20

In this video, you’re going to learn about the checkbox. You’ll learn how to set up a checkbox and respond to changes when the box is checked and unchecked.

Checkboxes
18:25

In this video, you’re going to learn about the dropdown. You’ll learn how to set up the dropdown, configure its options, and respond to changes when a new option is picked.

Dropdowns
08:00
+ Data Storage, Libraries, and More
18 lectures 03:39:02

In this section, you’re going to continue working on the note and to-do applications. You’ll learn how to save user data and work with third-party libraries.

Section Intro: Data Storage, Libraries, and More
00:42

In this video, you’ll learn about local storage. This is a storage mechanism built right into the browser. This is going to allow us to store notes and to-dos for later. We’ll cover the basic CRUD operations (create, read, update, delete).

Saving Our Data in LocalStorage: Part I
13:44

In this video, you’ll start integrating local storage into the apps. This will allow users to add some to-dos or notes and pick up where they left off.

Saving Our Data in LocalStorage: Part II
11:23

In this video, we’re going to spend a bit of time refactoring our code. This is going to improve the quality and organization of our code without changing the application’s behavior.

Splitting up Our Application Code
13:36

In this video, you’re going to refactor the to-do application using what you learned in the last video.

Refactor Challenge
10:18

In this video, you’re going to learn how to debug your JavaScript code. This will reduce the amount of time you spend tracking down small typos.

Debugging Our Applications
08:38

In this video, you’re going to learn how to render more real-world elements to the DOM. Rendering a single element is fine, but what if we want a checkbox, some text, and a delete button for each to-do item?

Complex DOM Rendering
14:16

In this video, you’re going to work with your first third-party JavaScript library. Third-party libraries allow you to use code written by others.

Setting up a Third-Party Library
13:38

In this video, you’re going to target your note and to-dos by their id. This will allow you to read their data, update the data, or remove the item altogether.

Targeting by UUID
10:41
Checkbox Challenges
08:48

In this video, you’re going to set up a second HTML page for our note application. This is where we’ll allow users to edit the note’s title and body content.    

The Edit Note Page: Part I
16:40

In this video, you’re going to learn how to pass an id between pages. This is going to allow us to tell the edit page which note we want to edit.

The Edit Note Page: Part II
18:03

In this video, you’re going to set up real-time data syncing across pages. If data changes on one page, all other pages will be automatically updated.

Syncing Data Across Pages
13:09

In this video, you’re going to learn about the built-in date in JavaScript. This gives you a way to work with dates and time in your application.

JavaScript Dates
18:10

Does JavaScript come with built-in support for dates? Yup. Is it fun to use? Nope. In this video, you’ll learn about moment.js, a third-party JavaScript library that makes working with dates better.

Moment
19:50

In this video, you’re going to start integrating moment into the notes application.

Integrating Dates: Part I
14:02

In this video, you’re going to finish integrating moment into the notes application.

Integrating Dates: Part II
12:12
Take a Break
01:12
+ Expanding Our JavaScript Knowledge
9 lectures 01:42:37

In this section, you’ll continue learning new language features. The focus here is on improving our code quality and creating cleaner code. You’ll learn about the arrow function, the conditional operator, type coercion, and more.

Section Intro: Expanding Our JavaScript Knowledge
01:33

In this video, you’re going to learn about arrow functions. You’ll learn what they are and how they differ from the functions we’ve created so far.

Arrow Functions: Part I
12:21

In this video, you’re going to stick with arrow functions. We’ll be exploring a few more features as well as integrating them into the notes and to-do applications.

Arrow Functions: Part II
16:57

In this video, you’re going to learn about the conditional operator. This is a nice shorthand for an if/else statement where you want to do one of two things.

Conditional (Ternary) Operator
14:27

In this video, you’re going to learn about truthy and falsy values in JavaScript. This allows us to reduce the complexity of our conditionals.

Truthy and Falsy Values
17:03

In this video, you’re going to learn about type coercion. Type coercion is the process of converting a value from one type, such as a number, to another type, such as a string.

Type Coercion
11:00

In this video, you’re going to learn how to work with errors in JavaScript. This covers both sides, how we can create errors and how we can recover from them.

Catching and Throwing Errors
15:27

In this video, you’re going to integrate a try/catch statement into the to-do and note application. This is going to let us respond to errors thrown by JSON.parse when invalid JSON is parsed.

Handling Application Errors
05:20

In this video, you’re going to learn about strict mode in JavaScript. When you enable strict mode, you’re opting-in to a modified version of JavaScript that removes dangerous and potentially buggy behavior.

Working in Strict Mode
08:29
+ Advanced Objects and Functions
15 lectures 03:01:34

In this section, you’re going to explore how JavaScript handles inheritance via prototypal inheritance. This includes the new operator, the constructor function, the class syntax, and more.

Section Intro: Advanced Objects and Functions
01:09

In this video, you’re going to be introduced to object-oriented programming. You’ll explore what it is and why it’s a useful tool when working with JavaScript.

Object Oriented Programming
06:40

In this video, you’re going to build and use a constructor function. Constructor functions allow us to define new types in JavaScript other than the built-in types.

Constructor Functions
15:32

In this video, you’re going to learn about the prototype property. The prototype property gives you a way to define a shared set of properties/methods for all your instances.

Setting up the Prototype Object
13:45

In this video, you’re going to build out part of the hangman game.

Hangman Challenge: Part I
09:10

In this presentation, you’re going to explore how prototypal inheritance works behind the scenes. This will explain why we’re able to add our shared methods onto the constructor’s prototype and then access them on each instance.

Digging Into Prototypical Inheritance
09:51

In this video, you’re going to explore how JavaScript uses prototypal inheritance for built-in types.

Primitives and Objects: Part I
16:20

In this video, you’re going to explore how JavaScript uses prototypal inheritance for the other built-in types. This is part 2 of 2.

Primitives and Objects: Part II
13:36

In this video, you’re to build out part of the hangman game.

Hangman Challenge: Part II
13:30

In this video, you’re to build out part of the hangman game.

Hangman Challenge: Part III
20:42

In this video, you’re to build out part of the hangman game.

Hangman Challenge: Part IV
08:08

In this video, you’re going to explore the class syntax. This is a newer language feature that makes setting up our constructors and methods a bit easier.

The Class Syntax
11:40

In this video, you’ll learn how to create and use subclasses. This allows you to create a class that inherits behavior from another class you created.

Creating Subclasses
19:56

In this video, you’re going to play around with custom getters and setters in JavaScript. These allow you customize what happens when someone sets or gets an object property.

Getters and Setters
18:29

In this video, you’re going to address an edge case with our JavaScript code.

Update: Fixing an Edge Case
03:06
Requirements
  • No programming experience is required to take this course. I’ll walk you through the entire process from scratch!
  • All you need is a computer (Windows, macOS, or Linux) with an internet connection (Windows, macOS, or Linux)
Description

Have you tried to learn JavaScript before?

JavaScript is the most popular programming language out there, but that doesn’t mean it’s easy to learn. You end up wasting time on out-of-date courses and incomplete YouTube tutorials that talk about a JavaScript features without showing how to use them when building real-world applications.

Sound familiar?

I built this course to teach you how to build and launch your own JavaScript web applications.

The Modern JavaScript Bootcamp starts from scratch and builds up your knowledge of the JavaScript language. Yes, you’ll learn all the features of the language, but you’ll also learn how to use those features together to create a complete application.

This comprehensive course covers the modern ES6 and ES7 JavaScript features used in the real world. You’ll gain an understanding of the latest cutting-edge language features.

Getting experience writing code on your own is a big part of learning JavaScript. That’s why I’ve included over 80 challenges designed to get you writing code, adding app features, and solving a wide range of problems. These challenges will give you the skills and confidence needed to create your own web application.

There are no starter projects here. You’ll see what it takes to launch a JavaScript application, from the first line of code to the final deployed application.

Who’s this course for?

1. People who are brand new to JavaScript. You want to dive into the world of programming and learn JavaScript. This might be your first programming course, or maybe you’ve worked with other languages before. Either way, you’re ready for this bootcamp.

2. People who currently use JavaScript but want a better sense of mastery over the language. You picked up little tricks and snippets of code because you needed to solve a problem. Now you’re ready to master JavaScript as well as explore the latest from ES6 and ES7.

You’ll learn JavaScript by doing, not watching.

This course is not about watching videos, it’s about writing code. From the start, you’ll be building out each project from scratch as well as completing over 80 challenges designed to test and reinforce what you’ve learned.

During the class, you’ll build three JavaScript applications:

1. The first app, a note-taking app, is our starter application. You’ll learn the fundamentals of JavaScript and see exactly what it takes to build a program that allows users to add, edit, delete, and save their notes.

2. The second app, a to-do application, you’ll be building on your own. This will test your skills and ensure that you have the real-world experience and problem-solving skills that are essential for writing JavaScript code.

3. The last app, a hangman word game, is used to explore the world of asynchronous JavaScript. You’ll learn how to set up applications that rely on data from third-party services that can offer up dynamic, real-time information such as the user’s current location.

Stay current in an ever changing world.

The world of JavaScript is always changing, and that’s why I work to keep this course as up-to-date as possible. You can join knowing you’ll be learning the fundamentals of the language as well as the new language features that keep coming out.

This course uses the latest language features from ES6 and ES7.

Everything you need comes in one easy-to-use package.

There’s no need to worry if you’re learning the right skills to land that JavaScript job or launch that JavaScript app. I’ve mapped out everything you need to know in an interactive, easy-to-follow package designed to get you up and running in a couple of weeks.

By the end, you’ll be able to build and launch your own applications.

There’s no better time to learn JavaScript.

You’ve made a smart choice, because JavaScript is the most popular programming language out there. This is no exaggeration. This popularity and growth means more jobs and opportunities than ever before.

JavaScript powers the web. That means every company out there uses JavaScript, and the demand for JavaScript developers is only increasing. Companies from Google and Apple to Udemy itself all use JavaScript extensively.

JavaScript doesn’t stop with the web. It has quickly become a universal programming language capable of anything. JavaScript can be used to create desktop apps, server-side applications, native iOS/Android applications, and so much more. This course is your ticket into that ecosystem.

Get access to fast support if you get stuck.

There’s nothing worse than getting stuck ten hours into a course and not getting the help you need to continue. Getting stuck is part of the learning process. That’s why I’m here to answer every single question that comes my way.

I’ll work with you to get you unstuck and back on track. It’s one of the reasons students love taking my courses. Don’t take my word for it. Check out the student reviews below.

“This is the absolute best course I've taken on Udemy. Andrew is amazing at explaining things concisely, and the flow of the course is perfect. He doesn't skip over anything and he doesn't over-explain anything. On top of all that, he responds to questions so quickly that you won't be stuck at any point." - Tanya Gamarian

"The lessons are of high quality and even more important, he actually takes time to answer your questions!" - Thomas Vercamer

I guarantee that this is the most up-to-date and engaging JavaScript course available, and it comes with a Udemy 30-day money-back guarantee.

I can’t wait to see you on the inside!

- Andrew

Who this course is for:
  • Learning JavaScript for the first time? Already using JavaScript and want to master the language? This course is for you!
  • This course if for anyone who wants to use JavaScript to launch an application, switch careers, or freelance as a JavaScript developer.