The Modern JavaScript Bootcamp

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

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!

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

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

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.

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.

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.

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!

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

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.

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.

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

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.

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

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.

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.

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

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

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!

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.

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

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.

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

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

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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

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.

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

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

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.

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?

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

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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).

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.

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.

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

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.

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?

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.

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.

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.    

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.