Modern JavaScript From The Beginning 2.0
36h 42m 18s
English
Paid
Course description
This is a 37+ hour in-depth course that will take you from the absolute beginning of JavaScript, learning about data types, functions and loops to learning DOM manipulation, asynchronous JS with promises, async/await and much more. You will even learn how to write unit tests for algorithms. We go into how JavaScript works under the hood including execution context, the call stack, event loop, etc. We learn about Webpack tooling and how to create a modern development environment. At the end, we build a Node.js/Express API with a custom Webpack frontend.
Read more about the course
What you'll learn
- All of the fundamentals, including variables, data types, functions, scope, etc
- DOM Manipulation, events and creating dynamic UIs
- Under the hood topics, like execution context and the call stack
- Asynchrounous JS including callbacks, promises, async/await
- Web APIs like geolocation, audio/video, canvas and speech
- OOP including classes and prototypes
- Modern environments with with Webpack tooling
- Bonus: Complete full-stack application with Node.js/Express & Webpack
Watch Online
Watch Online Modern JavaScript From The Beginning 2.0
0:00
/ #1: Welcome To The Course
All Course Lessons (265)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Welcome To The Course Demo | 02:40 | |
| 2 | Course Outline | 07:50 | |
| 3 | Premium Docs | 03:06 | |
| 4 | What Is JavaScript? | 07:43 | |
| 5 | Tools & Setup | 05:25 | |
| 6 | Running JavaScript In The Browser | 07:03 | |
| 7 | Section Intro | 00:52 | |
| 8 | The Sandbox Files | 02:58 | |
| 9 | Using The Console | 10:07 | |
| 10 | Comments & Shortcuts | 07:01 | |
| 11 | Variables & Constants | 11:28 | |
| 12 | Data Types | 12:55 | |
| 13 | Primitive vs Reference Types | 07:08 | |
| 14 | Type Conversion | 10:07 | |
| 15 | Operators | 09:39 | |
| 16 | Type Coercion | 04:01 | |
| 17 | Working With Strings | 15:59 | |
| 18 | Capitalize Challenge | 06:50 | |
| 19 | Working With Numbers | 05:46 | |
| 20 | The Math Object | 05:57 | |
| 21 | Number Challenge | 08:30 | |
| 22 | Dates & Times | 08:13 | |
| 23 | 17 - Date Methods & DateTimeFormat API | 08:59 | |
| 24 | Section Intro | 00:42 | |
| 25 | Creating Arrays | 07:25 | |
| 26 | Basic Array Methods | 10:26 | |
| 27 | Nesting, Concat & The Spread Operator | 10:13 | |
| 28 | Array Challenges | 07:05 | |
| 29 | Object Literals | 08:07 | |
| 30 | Object Spread Operator & Methods | 11:59 | |
| 31 | Destructuring & Naming | 06:57 | |
| 32 | JSON Intro | 09:02 | |
| 33 | Object Challenges | 06:22 | |
| 34 | Section Intro | 01:33 | |
| 35 | Creating A Function | 06:08 | |
| 36 | More on Arguments & Parameters | 10:21 | |
| 37 | Global & Function Scope | 05:26 | |
| 38 | Block Scope | 05:15 | |
| 39 | Nested Scope | 02:57 | |
| 40 | Declaration vs Expression | 04:15 | |
| 41 | Arrow Functions | 07:37 | |
| 42 | Immediately Invoked Function Expressions (IIFE) | 05:03 | |
| 43 | Function Challenges | 12:20 | |
| 44 | Execution Context | 09:19 | |
| 45 | Execution Context In Action | 04:00 | |
| 46 | The Call Stack | 04:53 | |
| 47 | Section Intro | 01:09 | |
| 48 | If Statements | 06:54 | |
| 49 | Else-If & Nesting | 07:10 | |
| 50 | Switches | 04:58 | |
| 51 | Calculator Challenge | 03:21 | |
| 52 | Truthy & Falsy | 12:17 | |
| 53 | Logical Operators | 08:08 | |
| 54 | Logical Assignment | 06:11 | |
| 55 | Ternary Operator | 10:18 | |
| 56 | Section Intro | 00:57 | |
| 57 | For Loop | 11:26 | |
| 58 | Break & Continue | 02:52 | |
| 59 | While & Do While Loops | 07:00 | |
| 60 | FizzBuzz Challenge | 08:01 | |
| 61 | For...of Loop | 05:05 | |
| 62 | For...in Loop | 03:08 | |
| 63 | Array.forEach Method | 08:35 | |
| 64 | Array.filter Method | 11:33 | |
| 65 | Array.map Method | 15:31 | |
| 66 | Array.reduce Method | 08:50 | |
| 67 | Array Method Challenges | 10:27 | |
| 68 | Section Intro | 01:17 | |
| 69 | Intro To The DOM | 11:05 | |
| 70 | Document Element Properties | 14:20 | |
| 71 | DOM Selectors - Single Elements | 14:14 | |
| 72 | DOM Selectors - Multiple Elements | 09:17 | |
| 73 | Traversing The DOM - Elements | 11:27 | |
| 74 | Traversing The DOM - All Nodes | 13:48 | |
| 75 | Create & Append Elements | 06:16 | |
| 76 | InnerHTML vs createElement() | 08:52 | |
| 77 | Refactor To Multiple Functions | 04:10 | |
| 78 | Insert Elements, Text & HTML | 09:25 | |
| 79 | Custom insertAfter() Challenge | 04:48 | |
| 80 | Replace Elements | 09:47 | |
| 81 | Remove Elements | 07:47 | |
| 82 | Manipulating Styles & Classes | 09:38 | |
| 83 | Section Intro | 00:52 | |
| 84 | Event Listeners | 13:01 | |
| 85 | Mouse Events | 10:42 | |
| 86 | The Event Object | 13:01 | |
| 87 | Keyboard Events & Key Properties | 10:28 | |
| 88 | KeyCode Mini-Project | 14:52 | |
| 89 | Input Events | 11:48 | |
| 90 | Form Submission & FormData Object | 10:44 | |
| 91 | Event Bubbling | 05:39 | |
| 92 | Event Delegation & Multiple Events | 05:46 | |
| 93 | Page Loading & Window Events | 10:37 | |
| 94 | Project Intro | 03:32 | |
| 95 | Add Items To List (DOM Only) | 11:41 | |
| 96 | Setting Up Git & Github (Optional) | 15:25 | |
| 97 | Remove & Clear Items | 07:53 | |
| 98 | Clear UI State | 09:53 | |
| 99 | Filter Items | 09:56 | |
| 100 | Local Storage Crash Course | 05:32 | |
| 101 | Add Items To Local Storage | 08:05 | |
| 102 | Display Items From Local Storage | 06:16 | |
| 103 | Remove Items From Local Storage | 09:01 | |
| 104 | Set Item To Edit | 08:01 | |
| 105 | Update Item & Reset State | 06:11 | |
| 106 | Prevent Duplicate Items | 03:47 | |
| 107 | Deploy To Netlify | 04:59 | |
| 108 | Section Intro | 00:49 | |
| 109 | Under The Hood: Thread Of Execution | 02:40 | |
| 110 | Under The Hood: How Async JS Works | 08:40 | |
| 111 | setTimeout & clearTimeout Functions | 04:40 | |
| 112 | setInterval & clearInterval Functions | 08:52 | |
| 113 | Callbacks | 09:57 | |
| 114 | Crash Course On HTTP Requests | 07:14 | |
| 115 | DevTools Network Tab | 04:51 | |
| 116 | AJAX & XHR Object | 11:29 | |
| 117 | Joke Generator Project Challenge | 09:41 | |
| 118 | Callback Hell | 06:53 | |
| 119 | Promises | 10:03 | |
| 120 | Callback To Promise Refactor | 04:59 | |
| 121 | Promise Chaining | 04:16 | |
| 122 | Promises vs Callback Hell | 06:02 | |
| 123 | Handling Multiple Promises with promise.all() | 06:05 | |
| 124 | Section Intro | 01:27 | |
| 125 | Fetch Basics | 09:03 | |
| 126 | Random User Mini-Project | 12:53 | |
| 127 | Fetch Options - Method, Body Headers | 14:56 | |
| 128 | Typicode Todos Mini-Project - Part 1 | 17:11 | |
| 129 | Typicode Todos Mini-Project - Part 2 | 13:30 | |
| 130 | Fetch API Error Handling | 13:18 | |
| 131 | Async & Await | 09:26 | |
| 132 | Try...Catch Statements | 04:42 | |
| 133 | Error Handling With Async & Await | 06:43 | |
| 134 | Multiple Promises With Async & Await | 12:27 | |
| 135 | Project Intro | 04:23 | |
| 136 | Theme Overview & Prep | 07:15 | |
| 137 | API Overview & API Key | 04:51 | |
| 138 | Page Router & Active Link | 09:52 | |
| 139 | Display Popular Movies | 13:35 | |
| 140 | Spinner & Popular TV Shows | 07:22 | |
| 141 | Movie Details Page | 13:15 | |
| 142 | Details Page Backdrop | 04:53 | |
| 143 | TV Show Details Page | 07:07 | |
| 144 | Swiper Slider | 13:29 | |
| 145 | Search Functionality | 19:13 | |
| 146 | Display Search Results | 11:35 | |
| 147 | Add Pagination For Search | 16:38 | |
| 148 | Section Intro | 01:57 | |
| 149 | GeoLocation API | 11:47 | |
| 150 | Show Location on a Map | 07:30 | |
| 151 | Canvas Element & API | 13:48 | |
| 152 | requestAnimationFrame() Method | 08:11 | |
| 153 | Animated Clock - Part 1 | 25:08 | |
| 154 | Animated Clock - Part 2 | 11:09 | |
| 155 | Web Audio API | 08:26 | |
| 156 | Music Player Project | 20:03 | |
| 157 | Drum Machine Project | 09:07 | |
| 158 | Video API | 06:21 | |
| 159 | Video Player Project | 12:44 | |
| 160 | Web Animations API - Ball Project | 10:26 | |
| 161 | Speech Recognition API - Color Say Project | 11:39 | |
| 162 | Speech Synthesis API - Text To Speech | 13:22 | |
| 163 | Section Intro | 02:01 | |
| 164 | What Is OOP? | 09:18 | |
| 165 | 4 Basic Principles of OOP | 06:54 | |
| 166 | More on Object Literals & this Keyword | 05:02 | |
| 167 | Constructor Functions | 07:07 | |
| 168 | Literals vs Built-in Constructors | 09:48 | |
| 169 | Working With Object Properties | 07:29 | |
| 170 | Prototypes & The Prototype Chain | 04:55 | |
| 171 | Adding Methods to the Prototype | 04:38 | |
| 172 | Using Object.create() | 04:56 | |
| 173 | Prototypical Inheritance & call() | 10:12 | |
| 174 | OOP Game Challenge | 07:44 | |
| 175 | Classes | 07:30 | |
| 176 | Class Inheritance | 06:29 | |
| 177 | Static Methods | 02:54 | |
| 178 | bind() & Defining this | 05:21 | |
| 179 | Getters & Setters with Classes | 09:31 | |
| 180 | Getters & Setters with defineProperty() | 10:56 | |
| 181 | Private Property Underscore Convention | 12:14 | |
| 182 | ES2022 Private Class Fields | 04:43 | |
| 183 | Property Flags & Descriptors | 09:13 | |
| 184 | Sealing & Freezing Objects | 07:26 | |
| 185 | Project Intro | 04:17 | |
| 186 | UI Theme Setup | 04:43 | |
| 187 | Project Planning & Diagram | 05:04 | |
| 188 | Base Tracker, Meal & Workout Class | 09:56 | |
| 189 | Display Tracker Stats | 14:46 | |
| 190 | Progress Bar & Calorie Alert | 10:01 | |
| 191 | App Class, New Meal & Workout | 13:11 | |
| 192 | Refactor to Single _newItem Method | 04:31 | |
| 193 | Display New Meal & Workout | 07:36 | |
| 194 | Remove Meal & Workout | 10:01 | |
| 195 | Filter & Reset | 10:52 | |
| 196 | Set Calorie Limit | 05:17 | |
| 197 | Storage Class & Calorie Limit Persist | 05:47 | |
| 198 | Persist Total Calories To Local Storage | 04:41 | |
| 199 | Save Meals To Local Storage | 07:40 | |
| 200 | Save Workouts To Local Storage | 03:44 | |
| 201 | Remove Meals & Workouts From LocalStorage | 05:53 | |
| 202 | Clear Storage Items | 04:15 | |
| 203 | Section Intro | 02:07 | |
| 204 | What Are Modules? | 07:04 | |
| 205 | Installing & Using Node.js | 06:17 | |
| 206 | CommonJS Modules | 09:18 | |
| 207 | NPM Packages/Modules | 11:21 | |
| 208 | ES Modules | 07:27 | |
| 209 | Module Bundlers | 05:45 | |
| 210 | Webpack Basic Setup | 11:18 | |
| 211 | CSS & Style Loaders | 04:40 | |
| 212 | HTML Webpack Plugin | 08:17 | |
| 213 | Webpack DevServer Plugin | 04:40 | |
| 214 | Babel Setup | 05:06 | |
| 215 | CSS Minify Extract Plugin | 03:01 | |
| 216 | Tracalorie Refactor To Use Webpack | 16:29 | |
| 217 | Deploy Tracalorie To Netlify | 04:39 | |
| 218 | Section Intro | 01:25 | |
| 219 | Symbols | 10:24 | |
| 220 | Iterators | 09:13 | |
| 221 | Generators | 05:09 | |
| 222 | Profile Scroller Project | 07:53 | |
| 223 | Sets | 05:14 | |
| 224 | Maps | 06:17 | |
| 225 | Poll Project | 12:04 | |
| 226 | Stacks | 13:31 | |
| 227 | Queues | 08:45 | |
| 228 | Linked Lists | 25:18 | |
| 229 | Intro & What Are Algorithms? | 02:44 | |
| 230 | What is Unit Testing? | 03:24 | |
| 231 | Getting Started with Jest | 05:46 | |
| 232 | Grouping Tests Together | 10:53 | |
| 233 | Reverse String Algorithm | 09:50 | |
| 234 | Palindrome Algorithm | 09:59 | |
| 235 | Array Chunking | 06:12 | |
| 236 | Anagram Algorithm | 11:58 | |
| 237 | Get Elements By Tag - jsdom | 17:53 | |
| 238 | Has Duplicate IDs - jsdom | 15:45 | |
| 239 | Section Intro | 02:19 | |
| 240 | fs (filesystem) Module | 13:56 | |
| 241 | path Module | 07:57 | |
| 242 | os Module | 11:05 | |
| 243 | url & querystring Modules | 07:23 | |
| 244 | http Module | 18:21 | |
| 245 | Project Intro | 03:34 | |
| 246 | Express Setup & Basic API | 16:05 | |
| 247 | Nodemon & Route Clean Up | 06:06 | |
| 248 | Handle POST Requests - Add Idea | 08:21 | |
| 249 | PUT & DELETE Requests - Update & Remove Ideas | 06:18 | |
| 250 | What Is MongoDB? | 04:47 | |
| 251 | MongoDB Atlas Setup | 05:52 | |
| 252 | Mongoose Connect & Dotenv | 08:54 | |
| 253 | Mongoose Schema & Model | 08:54 | |
| 254 | Database Queries | 15:15 | |
| 255 | Fullstack Workflow | 03:01 | |
| 256 | Client Folder Setup | 09:16 | |
| 257 | Modal Component | 08:31 | |
| 258 | IdeaForm Component | 12:01 | |
| 259 | IdeaList Component | 12:05 | |
| 260 | API Service - Fetch Ideas | 11:58 | |
| 261 | Create Idea via Form | 07:26 | |
| 262 | Save Username to Local Storage | 04:57 | |
| 263 | Add Username Validation To Server | 07:21 | |
| 264 | Delete Ideas | 12:57 | |
| 265 | Deploying A Fullstack App | 08:37 |
Unlock unlimited learning
Get instant access to all 264 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsSimilar courses

Modern JavaScript
Sources: ui.dev (ex. Tyler McGinnis)
This is a 'living' course which updates as JavaScript does. If you haven't taken a look at the latest versions of JavaScript the last few years you've been missing out. From obj...
3 hours 4 minutes 3 seconds

ES6 for everyone
Sources: wesbos
ES6 for Everyone is a premium training course to strengthen your core JavaScript skills and master all that ES6 has to offer. ES6 is a major update to JavaScrip
7 hours 36 minutes

The Ultimate Web Scraping Course
Sources: Adrian Horning (The Web Scraping Guy)
I have been earning a living through web scraping for over 3 years, have made over $125,000, have more than 25,000 followers on social media, and in this...
10 hours 33 minutes 19 seconds

JavaScript: Understanding the Weird Parts
Sources: udemy, Anthony Alicea
Gain a deep understanding of JavaScript and improve debugging skills. Explore advanced concepts like prototypical inheritance and ES6 for a robust development
12 hours 10 minutes 48 seconds

Discord Clone - Learn MERN Stack with WebRTC and SocketIO
Sources: udemy
Learn how to connect MERN Stack with WebRTC and SocketIO. We will go through all of the steps to create application with group call functionality. We will crea
19 hours 29 minutes 29 seconds
Want to join the conversation?
Sign in to comment