JavaScript Masterclass Online Course

JavaScript Masterclass Online Course

This JavaScript masterclass takes you from beginner to advanced, covering everything from core basics like variables, functions, loops, and operators to intermediate topics such as DOM, arrays, regex, OOP, and error handling. You’ll then tackle advanced concepts including event loops, callbacks, promises, async/await, and Fetch API. Along the way, you’ll build real-world applications, practice deploying them to GitHub and Netlify, and gain the skills to confidently work as an intern, fresher, or freelancer in web development.

Who should take this course?

This course is designed for aspiring web developers, software engineers, and programmers who want to gain a deep mastery of JavaScript. It’s also perfect for beginners aiming to build a strong foundation, as well as intermediate learners seeking to refine their skills for advanced web development projects.

What you will learn

• Learn complex concepts such as the ‘this' keyword, closures, promises, and async-wait
• Understand fundamentals such as variables and data types in JavaScript
• Understand control flow statements, loops, functions, and more
• Learn to effectively deploy code to GitHub and Netlify
• Master intermediate concepts such as DOM, arrays, local storage, OOP, and APIs
• Get introduced to Babel, Webpack, Firebase, and deployment tools

Course Outline

Introduction and Resources

• Course Introduction
• Resources

JavaScript Basics

• JavaScript Basics
• Environment Setup / 003
• How to Run JavaScript Files / 005
• Browser Console / 006
• Variables, Constants, and Comments / 007
• Naming Conventions / 007-1
• Data Types / 008
• Strings / 009
• String Methods / 010
• Numbers / 011
• Template Literals / 012
• Arrays / 013
• Null and Undefined / 014
• Booleans and Comparisons / 015
• Loose Versus Strict Comparison / 016
• Type Conversion / 017

Control Flow

• Control Flow / 018
• For Loop / 019
• For Loop (in and of) / 019-1
• While Loop / 020
• Do While Loop / 021
• If Statements / 022
• Else and Else If / 023
• Logical Operators / 024
• Logical NOT / 025
• Break and Continue / 026
• Switch Statements / 027
• Scope (Global and Local) / 028
• Ternary Operator / 028-1

Functions

• Functions - I / 029
• Functions - II / 030
• Arguments and Parameters / 031
• Returning Values / 032
• Arrow Functions / 033
• Functions and Methods / 034
• forEach Method and Callbacks / 035
• forEach Method / 036

Object Literals

• Object Literals - I
• Object Literals - II / 038
• Methods / 039
• this' Keyword / 040
• Objects in Arrays / 041
• Math Object / 042
• Primitive Versus Reference Types - I / 043
• Primitive Versus Reference Types - II / 043-2

Document Object Model

• DOM Introduction / 044
• DOM In-Depth / 045
• Query Selector / 046
• Selectors / 047
• Controlling Content (Add/Delete) / 048
• Attributes (Get/Set) / 049
• Changing CSS Styles / 050
• Classes (Add/Remove) / 051
• Relationships (Parent/Child/Siblings) / 052
• Events - I / 053-1
• Events - II / 053-2
• Creating and Removing Elements / 054
• Event Bubbling and Delegation / 055
• More DOM Events / 056

Form and Form Events

• Events Inside Forms / 057
• Submit Events / 059
• Regular Expressions / 060
• Testing RegEx Patterns / 061
• Basic Form Validation / 062
• Keyboard Events / 063
• Events on HTML Page / 065

Project: Quiz Application

• Project Demo / 210
• Template Structure (Optional) / 211
• Template Structure (Optional) / 212
• Working with Answer / 213
• Score Update / 214
• Reload / 215
• Final Demo / 216
• Project Deployment Using GitHub and Netlify / 321

Array Methods

• Filter Method / 071
• Map Method / 072
• Reduce Method / 073
• Find Method / 074
• Sort Method / 075
• Reverse Method / 075-3
• Chaining Methods / 076

Project: Todo List Manager

• Project Demo / 221
• Template Structure (Optional) / 222
• Template Structure (Optional) / 223
• Add Task / 224
• Delete Task / 225
• Update Task Count / 226
• Search Task I / 227
• Search Task II: Case Sensitive / 228
• Project Deployment Using GitHub and Netlify / 322

Dates and Time

• Dates / 205
• Times / 206

Local Storage

• Local Storage / 207
• JSON / 208

Project: Budget Tracker

• Project Demo / 229
• Template Structure (Optional) / 231
• Template Structure (Optional) / 232
• Add Transaction / 234
• Transactions on localStorage / 235
• Income and Expense List / 236
• Get Transactions / 237
• Delete Transaction / 238
• Update Statistics / 239
• Empty Transactions / 240
• Project Deployment Using GitHub and Netlify / 316

Object-Oriented Programming

• Object-Oriented Programming - I
• Object-Oriented Programming - II
• Object Literals Again! / 117
• Classes / 118
• Methods / 119
• Inheritance - I / 120
• Inheritance - II / 121
• Prototype Model / 122
• Prototype Inheritance / 123
• Built-in Methods
• Static Keyword / 125
• Getter and Setter / 127

Error Handling and Exceptions

• Error Handling / 201
• Exceptions / 202

Modules

• Module - I / 203
• Module - II / 204

Project: Kanban Application

• Project Demo / 281
• Template Structure (Optional) / 282
• Template Structure (Optional) / 283
• Kanban Flow / 284
• Class and Function / 285
• Get Task / 286
• Insert Task / 287
• Delete Task / 288
• Update Task / 289
• Task Card / 290
• Task Count / 291
• Form: Add Task / 292
• Form: Edit Task / 293
• Form: Delete Task / 294
• Drag-Drop Task Card / 295
• Project Deployment Using GitHub and Netlify / 317

Asynchronous JavaScript

• Asynchronous JavaScript / 181
• setTimeout / 182
• setInterval / 183
• Callbacks and Callback Hell / 184
• Promises / 185
• Promises All / 186
• Async and Await / 187
• API / JSON Data
• Fetch API / 189
• Fetch API - Methods / 190

Project: News Portal

• Project Demo / 241
• Template Structure (Optional) / 242
• Template Structure (Optional) / 243
• Working with News API / 244
• Fetch News Data / 245
• News Categories / 246
• Backup Data / 247
• Category Request / 248
• Project Deployment Using GitHub and Netlify / 319

Babel

• Installing Node.js
• Babel Introduction
• Babel CLI / 153
• Babel / 154
• Folder Structure / 155

Webpack

• Webpack / 156
• Loaders
• Mode / 158
• Webpack Dev Server / 162
• Webpack Boilerplate Code / 163

Firebase

• Firebase Introduction
• Webpack Setup / 252
• Firebase Setup / 253
• Firebase Connection / 254
• Fetching Documents - I / 255
• Fetching Documents- II / 256
• Adding and Deleting Documents / 257
• Snapshots / 258
• Firestore Queries / 259
• Ordering Data / 260
• Updating Documents / 261
• Fetching Individual Document / 262
• Authentication - I / 263
• Authentication - II / 264

Project: Bookmark Manager

• Project Demo / 269
• Template Structure (Optional) / 271
• Template Structure (Optional) / 272
• Firebase Setup / 273
• Access Document / 274
• Delete Document / 275
• Filter Documents / 276
• Project Deployment Using GitHub and Netlify / 318

Project: notNotion

• Project Demo / 301
• Template Structure (Optional) / 302
• Template Structure (Optional) / 303
• Template Structure (Optional) / 304
• Template Structure (Optional) / 305
• Template Structure (Optional) / 306
• Navbar, Modals and Accordions / 307
• Swipe Library - I / 308
• Swipe Library - II / 309
• Merge All Projects / 310
• Project Deployment Using GitHub and Netlify / 320

Course Completion

• Course Completion

HTML and CSS Refresher

• How Web Works? (Optional)
• Environment Setup
• HTML Introduction
• Head Section
• Common HTML Tags
• Media Tags
• Linking Page
• Forms I
• Forms II
• Comments
• List
• Tables
• Inline and Block
• Id and Classes
• HTML Semantics I
• HTML Semantics II
• HTML Entity
• Introduction to CSS
• CSS Types and Order
• Selectors
• Selector Game I
• Selector Game II
• Specificity / R029
• Common Properties