Modern Javascript

Section Intro: Setting up Your Computer Preview 01:03

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!

Installing Visual Studio Code Preview 05:25

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

Installing Node.js Preview 02:43

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

[Windows Only] Install cmder Preview 02:14

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.

Introduction to the Terminal Preview 07:52

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.

Hello JavaScript! Preview 05:31

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.

Section Intro: JavaScript Basics Preview 00:58

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!

Strings and Variables Preview 17:05

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

Numbers Preview 13:40

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.

More on Variables Preview 06:09

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.

Build a Temperature Converter Preview 06:11

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

Booleans and Comparison Operators Preview 13:28

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.

If Statements Preview 10:18

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

Advanced If Statements Preview 12:01

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.

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

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.

Variable Scope: Part I Preview 10:38

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 II Preview 10:14

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

Section Intro: JavaScript Functions Preview 01:31

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!

Function Basics Preview 16:15

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.

Undefined and Null Preview 09:54

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

Multiple Arguments and Argument Defaults Preview 15:46

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.

Function Scope Preview 04:31

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

Template Strings Preview 12:58

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

Build a Grade Calculator Preview 13:12

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.

Section Intro: JavaScript Objects Preview 01:17

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.

Object Basics Preview 13:02

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.

Using Objects with Functions Preview 11:30

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.

Object References Preview 08:49

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

Build an Expense Tracker Preview 09:52

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

Methods Preview 13:05

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.

Exploring String Methods Preview 17:02

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 Number Methods Preview 13:50

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.

Constant Variables Preview 08:10

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.

Bonus: Variables with var Preview 11:26

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.

Section Intro: JavaScript Arrays Preview 01:18

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.

Array Basics Preview 13:21

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.

Manipulating Arrays with Methods Preview 13:17

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

Looping Over Arrays Preview 09:21

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.

The For Loop Preview 16:37

Searching Arrays: Part I Preview 14:49

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

Searching Arrays: Part II Preview 20:41

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

Filtering Arrays Preview 17:45

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.

Sorting Arrays Preview 18:13

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?

Improve Our Expense Tracker Preview 18:58

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

Section Intro: Javascript in the Browser Preview 01:24

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.

Setting up a Web Server Preview 15:12

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.

JavaScript in the Browser Preview 08:14

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.

DOM Manipulation Preview 12:13

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 Challenge Preview 11:13

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

Adding Elements via the DOM Preview 14:25

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.

Handling User Interaction Preview 12:33

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.

Advanced Queries Preview 13:35

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.

Text Inputs and Live Data Filtering Preview 12:44

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.

Rendering Our Filtered Data Preview 12:35

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.

Todo Filter Challenge Preview 09:58

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

Working With Forms Preview 17:20

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.

Checkboxes Preview 18:25

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.

Dropdowns Preview 08:00

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.

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

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.

Saving Our Data in LocalStorage: Part I Preview 13:44

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 II Preview 11:23

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.

Splitting up Our Application Code Preview 13:36

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.

Refactor Challenge Preview 10:18

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

Debugging Our Applications Preview 08:38

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.

Complex DOM Rendering Preview 14:16

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?

Setting up a Third-Party Library Preview 13:38

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.

Targeting by UUID Preview 10:41

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.

Checkbox Challenges Preview 08:48

The Edit Note Page: Part I Preview 16:40

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 II Preview 18:03

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.

Syncing Data Across Pages Preview 13:09

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.

JavaScript Dates Preview 18:10

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.

Moment Preview 19:50

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.

Integrating Dates: Part I Preview 14:02

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

Integrating Dates: Part II Preview 12:12

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

Take a Break Preview 01:12

Section Intro: Expanding Our JavaScript Knowledge Preview 01:33

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.

Arrow Functions: Part I Preview 12:21

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 II Preview 16:57

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.

Conditional (Ternary) Operator Preview 14:27

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.

Truthy and Falsy Values Preview 17:03

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.

Type Coercion Preview 11:00

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.

Catching and Throwing Errors Preview 15:27

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.

Handling Application Errors Preview 05:20

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.

Working in Strict Mode Preview 08:29

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.

Section Intro: Advanced Objects and Functions Preview 01:09

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.

Object Oriented Programming Preview 06:40

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.

Constructor Functions Preview 15:32

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.

Setting up the Prototype Object Preview 13:45

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.

Hangman Challenge: Part I Preview 09:10

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

Digging Into Prototypical Inheritance Preview 09:51

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.

Primitives and Objects: Part I Preview 16:20

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

Primitives and Objects: Part II Preview 13:36

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.

Hangman Challenge: Part II Preview 13:30

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

Hangman Challenge: Part III Preview 20:42

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

Hangman Challenge: Part IV Preview 08:08

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

The Class Syntax Preview 11:40

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.

Creating Subclasses Preview 19:56

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.

Getters and Setters Preview 18:29

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.

Update: Fixing an Edge Case Preview 03:06

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

Section Intro: Asynchronous JavaScript Preview 01:21

In this section, you’re going to explore asynchronous programming in JavaScript. The big picture goal is to figure out how we can communicate with servers via HTTP requests, allowing our scripts to be able to fetch and send data.

HTTP Requests from JavaScript Preview 17:27

In this lesson, you’ll learn how to make HTTP requests from client-side JavaScript code. This is going to allow us to fetch a randomly generated puzzle for the hangman game.

HTTP Headers and Errors Preview 14:53

In this lesson, you’re going to dive into the details of an HTTP request. You’ll dissect a request to see how the request and response are exchanged.

Exploring Another API Preview 11:31

This challenge lesson is going to require you to use XMLHttpRequest to make a request to a new URL.

Callback Abstraction Preview 17:03

In this lesson, you’re going to learn how to use callbacks to simplify the code that makes our HTTP requests. You’ll learn how to abstract the complexity of XMLHttpRequest into a simple function call.

Asynchronous vs. Synchronous Execution Preview 15:06

This lesson explores the differences between asynchronous and synchronous execution via a visualization.

Callback Abstraction Challenge Preview 07:15

In this challenge lesson, you’re going to create a getCountry function to abstract away the details of working with the REST Countries API.

Closures Preview 17:16

In this lesson, you’re going to learn about closures. This is a feature of that language that you’ve already been using, but defining and exploring them is going to help explain why the callback pattern works.

Exploring Promises Preview 16:01

In this lesson, you’re going to learn about promises. The Promise API is an alternative to callback functions which makes it easier to manage complex asynchronous code.

Converting to Promises Preview 11:58

In this challenge lesson, it’s up to you to switch from the callback pattern to promises.

Promise Chaining Preview 15:13

In this lesson, you’re going to explore promise chaining. Promise chaining makes it easy to link together multiple promises and do one thing after something else has finished.

The Fetch API Preview 14:54

In this lesson, you’re going to learn about the fetch API. The Fetch API provides a simpler alternative to XMLHttpRequest.

A Fetch Challenge Preview 06:46

In this challenge lesson, it’s up to you to make an HTTP request with the Fetch API.

A Promise Challenge Preview 12:16

In this challenge lesson, it’s up to you to use promise chaining with a brand new HTTP request.

Async/Await Preview 17:36

In this lesson, you’re going to learn about async functions and the await operator, also known as async/await. Async/await allows you to create asynchronous promise-based code that looks like standard synchronous code.

Async/Await Challenge Preview 10:29

In this challenge video, you’ll need to use async/await to make our application requests.

Integrating Data into the Application Preview 09:02

In this video, you’re going to wrap up the functionality for the hangman game.

Section Intro: App Themes Preview 01:00

In this section, you'll be integrating some styles into the three applications you've built.

CSS at a Glance Preview 13:35

In this video, you'll be learning about CSS at a high level. We'll see what it takes to apply styles to various elements on the page.

Setting up the Hangman Theme Preview 18:13

In this video, you'll be setting up the theme for the hangman game.

Setting up the Notes Theme: Part I Preview 18:27

In this video, you'll start to set up the theme for the note taking application.

Setting up the Notes Theme: Part II Preview 16:00

In this video, you'll finish setting up the theme for the note taking application.

Setting up the To-Do Theme: Part I Preview 10:44

In this video, you'll start to set up the theme for the to-do application.

Setting up the To-Do Theme: Part II Preview 17:15

In this video, you'll finish setting up the theme for the to-do application.

Hosting Your Applications Preview 14:01

In this video, you'll learn how to deploy your websites live to the web so you can share your application with anyone by giving them the URL.

Section Intro: Cutting-Edge JavaScript with Babel and Webpack Preview 01:17

In this section, you’re going to explore cutting-edge JavaScript features. You’ll also learn about Babel and webpack, two tools that’ll make it easier to create real-world JavaScript applications that work everywhere.

The Problem: Cross-Browser Compatibility Preview 03:30

In this video, you’re going to learn about cross-browser compatibility. This refers to the ability of a web application to work in a wide range of environments. You can’t control what browser or operating system a visitor is using, so it’s important to make sure the code you write works in as many browsers as possible.

Exploring Babel Preview 17:20

In this video, you’re going to set up Babel. Babel is a compiler for JavaScript. It’s going to solve all our cross-browser compatibility issues.

Setting up Our Boilerplate Preview 14:17

In this video, you’re going to set up the boilerplate project to serve up the compiled JavaScript code to the browser.

Avoiding Global Modules Preview 04:41

In this video, you’re going to learn why relying on global npm modules is generally a bad idea. You’ll be uninstalling the global npm modules in favor of local npm modules.

Exploring Webpack Preview 05:41

In this video, you’re going to learn about webpack. We’re not going to install it yet, but we will cover what it does and why it’s useful.

Setting up Webpack Preview 13:21

In this video, you’re going to set up webpack. This will allow us to take advantage of JavaScript modules.

JavaScript Modules: Part I Preview 14:54

In this video, you’re going to learn about JavaScript modules. JavaScript modules make it easy to share code between files, allowing us to create more advanced applications without messy code.

JavaScript Modules: Part II Preview 09:29

In this video, you’re going to continue exploring the module system provided by webpack.

Adding Babel into Webpack Preview 07:15

In this video, you’re going to configure webpack to use Babel. This will give you all the advantages of webpack, as well as all the advantages of Babel.

Webpack Dev Server Preview 10:22

In this video, you’re going to set up webpack-dev-server. This will simplify the development environment and let you start everything up with a single command.

Environments and Source Maps Preview 08:32

In this video, you’re going to set up webpack for production. This will let you create an optimized version of our bundle that’s better suited for production.

Converting Hangman App Preview 18:00

In this video, you’re going to start converting the Hangman application over to our boilerplate project.

Using Third-Party Libraries Preview 12:23

In this video, you’re going to learn how to use npm modules in your client side JavaScript code.

Converting Notes App: Part I Preview 07:53

In this video, you’re going to start converting the notes application to use our boilerplate project with Babel and webpack.

Converting Notes App: Part II Preview 13:21

In this video, you’re going to continue converting the notes application.

Converting Notes App: Part III Preview 14:13

In this video, you’re going to continue converting the notes application.

Converting Notes App: Part IV Preview 24:41

In this video, you’re going to wrap up the conversion process for the notes application.

To-Do App Conversion Setup Preview 11:56

In this video, I’m going to walk you through the to-do app challenge. It’ll be up to you to convert the application over to the new boilerplate project structure.

Converting To-Do App: Part I Preview 16:07

In this video, we’ll start going through the solution for the to-do app challenge.

Converting To-Do App: Part II Preview 13:44

In this video, we’ll wrap up the solution for the to-do app challenge.

The Rest Parameter Preview 11:04

In this video, you’re going to learn about the rest parameter. The rest parameter lets you access a set of the function arguments as an array.

The Spread Syntax Preview 11:47

In this video, you’re going to learn about the spread syntax. The spread syntax gives you a way to expand an array into it’s individual values. This can be used when calling a function or when creating an array.

The Object Spread Syntax Preview 08:41

In this video, you’re going to learn how to use the spread operator with objects. This gives you an easy way to create, clone, and merge objects.

Destructuring Preview 20:04

In this video, you’re going to learn about destructuring. Destructuring lets you pull values out of an object or array and into their own variable.

Section Intro: Wrapping Up Preview 01:28

In this section, we're going to wrap up the course! I'll give you an idea for an app that you can now build with the skills you now have. I'll also help you figure out where to go from here.

New App Idea Preview 04:26

In this video, I'll offer up an idea for a JavaScript app you can now build with the skills you now have.

Bonus: Where do I go from here? Preview 06:39

In this bonus video, we'll answer the question: "Where do I go from here?"