Modern Javascript From Novice To Ninja

  1. Home
  2. Javascript
  3. Modern Javascript From Novice To Ninja

Tags: JavaScript

Learn Modern JavaScript from the very start to ninja-level & build awesome JavaScript applications.

Last updated 2022-01-10 | 4.8

- Learn how to program with modern JavaScript
- from the very beginning to more advanced topics
- Learn all about OOP (object-oriented programming) with JavaScript
- working with prototypes & classes
- Learn how to create real-world front-end applications with JavaScript (quizes
- weather apps
- chat rooms etc)

What you'll learn

Learn how to program with modern JavaScript
from the very beginning to more advanced topics
Learn all about OOP (object-oriented programming) with JavaScript
working with prototypes & classes
Learn how to create real-world front-end applications with JavaScript (quizes
weather apps
chat rooms etc)
Learn how to make useful JavaScript driven UI components like popups
drop-downs
tabs
tool-tips & more.
Learn how to use modern
cutting-edge JavaScript features today by using a modern workflow (Babel & Webpack)
Learn how to use real-time databases to store
retrieve and update application data
Explore API's to make the most of third-party data (such as weather information)

* Requirements

* A basic grasp of HTML & CSS (how to create simple
* static web pages)

Description

Hey gang, and welcome to your first step on the path to becoming a JavaScript ninja! In this course I'll be teaching you my absolute favourite language (JavaScript!) from the very beginning, right through to creating fully-fledged, dynamic & interactive web experiences.

We'll cover all the basics to get you up-and-running quickly, before diving in to some of the really fun stuff like web-page manipulation, creating interactive forms, popups & other cool effects. Along the way we'll be using the latest additions to the JavaScript specification (ES6, 7 & beyond) and maintaining good coding standards to keep our code clean and effective!

Once we master the basics, we'll dive into several real-life JavaScript projects, including an interactive quiz, a weather app, a real-time chat application and a small UI library you can use in all your future projects!

We'll also take a look at some more advanced topics - object oriented programming, asynchronous code, real-time databases using Firebase (including a new chapter about Firebase 9) and much more. Finally, we'll be setting up a modern work-flow using Webpack & Babel, so that by the end of this course you'll be no less than a black-belt JavaScript developer with a lot of coding techniques in your tool-belt.

Speaking of ninjas, I'm also known as The Net Ninja on YouTube, where you'll find hundreds of free coding tutorials, so feel free to pop by to say hello :).


Who this course is for:

  • New or junior developers who want to learn JavaScript from the ground up
  • Front-end developers who want to level-up their JavaScript knowledge using modern, cutting-edge techniques
  • Back-end developers who want to learn the JavaScript language for front-end development

Course content

22 sections • 188 lectures

Introduction 4 lectures

Why You Should Take This Course Preview 03:00

Why JavaScript is Amazing Preview 02:23

Setting up Your Environment Preview 07:26

Course Files Preview 01:34

JavaScript Basics 13 lectures

Adding JavaScript to a Web Page Preview 05:02

The Browser Console Preview 02:47

Variables, Constants & Comments Preview 08:29

Data Types at a Glance Preview 04:19

Strings Preview 10:24

Common String Methods Preview 05:14

Numbers Preview 09:59

Template Strings Preview 06:09

Arrays Preview 09:14

Null & Undefined Preview 03:17

Booleans & Comparisons Preview 09:41

Loose vs Strict Comparison Preview 04:04

Type Conversion Preview 05:33

Control Flow Basics 11 lectures

What is Control Flow? Preview 01:28

For Loops Preview 09:16

While Loops Preview 04:12

Do While Loops Preview 02:34

If Statements Preview 04:55

Else & Else If Preview 04:13

Logical Operators Preview 05:03

Logical NOT Preview 03:17

Break & Continue Preview 04:03

Switch Statements Preview 05:26

Variables & Block Scope Preview 08:27

Functions & Methods 8 lectures

What are Functions? Preview 02:47

Function Declarations & Expressions Preview 06:08

Arguments & Parameters Preview 04:46

Returning Values Preview 04:28

Arrow Functions Preview 09:00

Functions vs Methods Preview 03:31

Foreach Method & Callbacks Preview 08:30

Callback Functions in Action Preview 04:20

Object Literals 7 lectures

Objects at a Glance Preview 02:25

Creating an Object Literal Preview 06:53

Adding Methods Preview 03:02

'this' Keyword Preview 06:14

Objects in Arrays Preview 03:46

Math Object Preview 05:26

Primitive vs Reference Types Preview 09:47

The Document Object Model 14 lectures

Interacting with the Browser Preview 02:04

The DOM Explained Preview 04:54

The Query Selector Preview 08:20

Other Ways to Query the DOM Preview 05:46

Adding & Changing Page Content Preview 09:42

Getting & Setting Attributes Preview 05:40

Changing CSS Styles Preview 05:49

Adding & Removing Classes Preview 10:23

Parents, Children & Siblings Preview 10:43

Event Basics (click events) Preview 09:59

Creating & Removing Elements Preview 07:35

Event Bubbling (and delegation) Preview 10:01

More DOM Events Preview 09:38

Building a Popup Preview 09:55

Forms & Form Events 6 lectures

Events Inside Forms Preview 01:44

Submit Events Preview 07:57

Regular Expressions Preview 08:06

Testing RegEx Patterns Preview 07:34

Basic Form Validation Preview 05:08

Keyboard Events Preview 08:52

Project - Interactive Ninja Quiz 7 lectures

Project Preview & Setup Preview 01:38

Bootstrap Basics Preview 05:50

HTML Template Preview 10:51

Checking Answers Preview 09:13

Showing the Score Preview 05:11

The Window Object Preview 06:40

Intervals & Animating the Score Preview 06:45

Array Methods 6 lectures

Filter Method Preview 08:18

Map Method Preview 08:08

Reduce Method Preview 07:35

Find Method Preview 03:04

Sort Method Preview 10:45

Chaining Array Methods Preview 06:41

Project - Todo List 5 lectures

Project Preview and Setup Preview 02:50

HTML & CSS Template Preview 06:49

Adding Todos Preview 09:12

Deleting Todos Preview 05:01

Searching & Filtering Todos Preview 17:53

Dates & Times 4 lectures

Dates & Times in JavaScript Preview 07:38

Timestamps & Comparisons Preview 07:20

Building a Digital Clock Preview 07:08

Date-fns Library Preview 09:12

Async JavaScript 13 lectures

What is Asynchronous JavaScript? Preview 06:04

Async Code in Action Preview 02:37

What are HTTP Requests? Preview 04:05

Making HTTP Requests (XHR) Preview 07:22

Response Status Preview 06:02

Callback Functions Preview 08:13

JSON Data Preview 06:53

Callback Hell Preview 05:08

Promise Basics Preview 11:32

Chaining Promises Preview 05:04

The Fetch API Preview 07:26

Async & Await Preview 10:44

Throwing & Catching Errors Preview 05:04

Project - Weather App 11 lectures

Project Preview & Setup Preview 04:40

HTML & CSS Template Preview 08:57

AccuWeather API Preview 05:18

Get City API Call Preview 08:35

Get Weather API Call Preview 08:32

Updating the Location Preview 09:58

Object Shorthand Notation Preview 01:48

Updating the UI Preview 07:25

Destructuring Preview 03:08

Weather Icons & images Preview 10:03

Ternary Operator Preview 03:33

Local Storage 5 lectures

What is Local Storage? Preview 03:27

Storing & Getting Data Preview 07:09

Deleting Storage Data Preview 02:47

Stringifying & Parsing Data Preview 05:18

Updating the Weather App Preview 05:59

Object Oriented JavaScript 12 lectures

What is OOP? Preview 07:32

Object Literal Recap Preview 05:18

Classes Preview 04:06

Class Constructors Preview 05:17

Class Methods & Method Chaining Preview 08:35

Class Inheritance (subclasses) Preview 08:25

Super( ) Preview 03:49

Constructors (under the hood) Preview 05:16

Prototype Model Preview 11:43

Prototypal Inheritance Preview 09:50

Built-in Objects Preview 03:27

Making a Forecast Class (weather app) Preview 10:52

Databases (Firebase) 8 lectures

NoSQL Databases Preview 02:58

Firebase & Firestore Preview 07:32

Connecting to Firestore Preview 05:52

Getting Collections Preview 11:16

Saving Documents Preview 07:50

Deleting Documents Preview 09:41

Real-time Listeners Preview 11:13

Unsubscribing Preview 03:53

Project - Real-time Chatroom 13 lectures

Project Preview & Setup Preview 04:15

HTML Template Preview 06:16

Connecting to Firebase Preview 05:02

Chatroom Class & Adding Chats Preview 09:58

Setting up a Real-time Listener Preview 06:08

Complex Queries Preview 06:00

Updating the Room & Username Preview 08:14

Creating a ChatUI Class Preview 10:56

Formatting the Dates Preview 03:53

Sending New Chats Preview 06:15

Changing Username & Local Storage Preview 15:13

Updating the Room Preview 07:57

Testing the App Preview 02:54

More ES6 Features 3 lectures

Spread & Rest Preview 07:39

Sets Preview 09:01

Symbols Preview 04:27

Modern Workflow with Babel & Webpack 15 lectures

Modern Feature Support Preview 03:17

An Introduction to Babel Preview 05:13

Installing Node.js & Babel Preview 10:47

Using the Babel CLI Preview 06:21

NPM Scripts & Watching Files Preview 08:43

What is Webpack? Preview 02:45

Setting up a Webpack File Preview 06:41

Webpack CLI Preview 05:13

Introduction to Modules Preview 10:05

Default Exports Preview 06:27

Watching for Changes Preview 01:56

The Webpack Dev Server Preview 06:05

Production & Development Modes Preview 04:49

Babel & Webpack Together Preview 07:18

Webpack Boilerplate Preview 04:49

Project - UI Library 7 lectures

Project Preview & Setup Preview 03:52

CSS & Style Loaders (webpack) Preview 05:30

Tooltips Preview 14:27

Dropdowns Preview 09:39

Tabbed Content Preview 14:44

Snackbars Preview 09:44

Extending the Library Preview 01:33

Using Firebase Database (& Auth) Version 9 15 lectures

What's New in Firebase 9? Preview 04:01

Webpack Setup Preview 08:34

Creating a Firebase Project Preview 04:30

Firestore Setup & Fetching Data Preview 11:18

Adding & Deleting Documents Preview 09:18

Real Time Collection Data Preview 05:53

Firestore Queries Preview 03:57

Timestamps & Ordering Data Preview 06:37

Fetching Single Documents Preview 04:46

Updating Documents Preview 03:49

Firebase Auth Setup Preview 02:22

Signing Users Up Preview 05:19

Logging In & Logging Out Preview 06:27

Listening to Auth Changes Preview 03:10

Unsubscribing from Changes Preview 04:41

Next Steps 1 lectures

Bonus Lecture: Next Steps Preview 02:26