Toggle navigation
Net Ninja Pro
All Courses
Community
YouTube Channel
Login
Sign Up
Autoplay
Autocomplete
Previous Lecture
Complete and continue
Modern JavaScript Masterclass
Course Introduction
1 - why you should take this course (3:00)
2 - why javascript is awesome (2:23)
3 - setting up your environment (7:26)
4 - course files (1:34)
JavaScript Basics
5 - adding javascript to a web page (5:02)
6 - the browser console (2:47)
7 - variables & constants (8:29)
8 - types (4:19)
9 - strings (10:24)
10 - string methods (5:14)
11 - numbers (9:59)
12 - template strings (6:09)
13 - arrays (9:14)
14 - null & undefined (3:17)
15 - booleans & comparisons (9:41)
16 - loose vs strict comparison (4:04)
17 - type conversion (5:33)
Control Flow Basics
18 - what is control flow (1:28)
19 - for loops (9:16)
20 - while loops (4:12)
21 - do while loops (2:34)
22 - if statements (4:55)
23 - else & else if (4:13)
24 - logical operators (5:03)
25 - logical not (3:17)
26 - break & continue (4:03)
27 - switch statement (5:26)
28 - block scope (8:27)
Functions & Methods
29 - what are functions (2:47)
30 - function declarations & expressions (6:08)
31 -arguments & parameters (4:46)
32 - returning values (4:28)
33 - arrow functions (9:00)
34 - functions vs methods (3:31)
35 - callback functions & foreach (8:30)
36 - callback functions in action (4:20)
Object Literals
37 - objects at a glance (2:24)
38 - creating an object (6:53)
39 - adding methods (3:02)
40 - this keyword (6:14)
41 - objects in arrays (3:46)
42 - Math object (5:26)
43 - primitive vs reference types (9:47)
The Document Object Model
44 - interacting with a web page (2:04)
45 - the DOM explained (4:54)
46 - the query selector (8:20)
47 - other ways to query the DOM (5:46)
48 - adding & changing page content (9:42)
49 - getting & setting attributes (5:40)
50 - adding & removing styles (5:49)
51 - adding & removing classes (10:23)
52 - parents, children & siblings (10:43)
53 - events & event listeners (9:59)
54 - creating & removing elements (7:35)
55 - event bubbling & delegation (10:01)
56 - more events (9:38)
57 - making a popup (9:54)
Forms & Form Events
58 - events inside forms (1:44)
59 - submit events (7:57)
60 - REGEX (8:06)
61 - testing REGEX patterns (7:34)
62 - basic form validation (5:08)
63 - keyboard events (8:52)
Project - Interactive Ninja Quiz
64 - project preview & setup (1:38)
65 - Bootstrap introduction (5:50)
66 - making the HTML template (10:51)
67 - calculating scores (9:13)
68 - showing the score (5:11)
69 - the window object (6:40)
70 - animating the score (6:45)
Array Methods
71 - filter method (8:18)
72 - map method (8:08)
73 - reduce method (7:35)
74 - find method (3:04)
75 - sort method (10:45)
76 - chaining array methods (6:41)
Project - Todo List
77 - project preview & template (2:50)
78 - HTML & CSS template (6:49)
79 - adding todos (9:12)
80 - deleting todos (5:01)
81 - filtering todos (17:53)
Dates & Times
82 - times (7:37)
83 - timestamps (7:20)
84 - building a digital clock (7:08)
85 - date-fns (9:12)
Async JavaScript
86 - what is async javascript (6:04)
87 - async in action (2:37)
88 - what are http requests? (4:05)
89 - making http requests (7:22)
90 - status codes (6:02)
91 - async code & callbacks (8:13)
92 - JSON data (6:53)
93 - callback hell (5:09)
94 - promise basics (11:32)
95 - chaining promises (5:04)
96 - fetch api (7:26)
97 - async & await (10:44)
98 - throwing custom errors (5:04)
Project - Weather App
99 - project preview & setup (4:40)
100 - html & css template (8:57)
101 - Accuweather API (5:18)
102 - get city API call (8:35)
103 - get weather API call (8:32)
104 - updating the location (9:58)
105 - object shorthand (1:47)
106 - updating the ui (7:25)
107 - destructuring (3:08)
108 - icons & images (10:03)
109 - ternary operator (3:33)
Local Storage
110 - what is local storage (3:27)
111 - storing & getting data (7:09)
112 - deleting storage data (2:47)
113 - stringifying & parsing data (5:18)
114 - updating the weather app (5:59)
Object Oriented JavaScript
115 - what is OOP? (7:32)
116 - object literal recap (5:18)
117 - classes (4:06)
118 - constructor functions (5:17)
119 - class methods & method chaining (8:35)
120 - class inheritance (8:25)
121 - super( ) (3:49)
122 - constructors under the hood (5:16)
123 - prototype model (11:43)
124 - prototypal inheritance (9:50)
125 - built-in objects (3:27)
126 - making a forecast class (weather app) (10:52)
Databases (Firestore)
127 - NoSQLS databases (2:58)
128 - firebase & firestore (7:32)
129 - connecting to firestore (5:52)
130 - getting documents (11:16)
131 - saving documents (7:50)
132 - deleting documents (9:40)
133 - real-time listeners (11:13)
134 - unsubscribing from changes (3:53)
Project - Real-time Chatroom
135 - project preview & setup (4:15)
136 - HTML template (6:16)
137 - connecting to firestore (5:02)
138 - chatroom classes (9:58)
139 - realtime listener setup (6:08)
140 - complex queries (6:00)
141 - updating the name & room (8:14)
142 - chat UI class (10:55)
143 - formatting the date & time (3:53)
144 - sending new chats (6:14)
145 - changing usernames (15:13)
146 - updating rooms (7:57)
147 - testing the app (2:54)
More ES6 Features
148 - rest & spread (7:39)
149 - sets (9:01)
150 - symbols (4:27)
Modern Workflow with Babel & Webpack
151 - modern feature support (3:17)
152 - babel basics (5:13)
153 - installing node & babel (10:47)
154 - using the babel cli (6:21)
155 - npm scripts & watching files (8:43)
156 - what is webpack (2:44)
157 - creating a webpack file (6:41)
158 - the webpack CLI (5:13)
159 - intro to modules (10:05)
160 - default exports (6:27)
161 - watching for changes (1:56)
162 - webpack dev server (6:05)
163 - production & development modes (4:49)
164 - babel & webpack (7:18)
165 - webpack boilerplate (4:49)
Project - UI Library
166 - project preview & setup (3:52)
167 - CSS & style loaders (webpack) (5:30)
168 - tooltips (14:27)
169 - dropdowns (9:39)
170 - tabs (14:44)
171 - snackbars (9:44)
172 - extending the library (1:33)
Using Firebase 9 (latest version)
Introduction & What's New (4:01)
Setting up Webpack (8:34)
Setting up Firebase (4:30)
Firestore Setup & Getting Data (11:18)
Adding & Deleting Documents (9:18)
Real Time Collection Data (5:53)
7 - Firestore Queries (3:57)
8 - Ordering Data & Timestamps (6:37)
Fetching a Single Document (4:46)
Updating Documents (3:49)
Setting up Firebase Auth (2:22)
Signing Users Up (5:19)
Logging in & Out (6:27)
Subscribing to Auth Changes (3:10)
Unsubscribing from Changes (4:41)
164 - babel & webpack
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock
