❓Quiz

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Start Coding with JavaScript: Beginner’s Essentials Guide

Important Introduction

Before You Register..
About This Course
Telegram Group for This Course

Getting Started -🛠️ Setting Up the Environment With All Options

🗝️ Introduction
🛠️ Setting Up the Environment With All Options.
❓Quiz

Your First Script – console.log

Your First Script – console.log (15:06)
📌 Where to "script.js" file inside HTML page? and Why?
❓ Quiz

Run and Test Your JavaScript Code (3 Ways/Options)

📥 Download Code From Here
🗝️Introduction: Ways to Run and Test Your JavaScript Code
1️⃣ 🖥️ Run and Test Your Code - Option 1: Open Directly
❓ Quiz 1: 🖥️ Run and Test Your Code - Option 1: Open Directly
2️⃣⚡Run and Test Your Code - Option 2: Use Live Server
❓Quiz 2: Run and Test Your Code – Option 2 (Live Server ⚡)
3️⃣ 🖧 Option 3: Running JavaScript in the Console (VS Code) using NodeJS Without Browser. (13:00)
❓Quiz 3: Run and Test Your Code – Option 3 (Node.js in Console 🖧)

Ways to Include JavaScript in HTML

Ways to Include JavaScript in HTML (14:15)
❓ Quiz: 3 Ways to Include JavaScript in HTML

About Javascript (⚠️ Important don't skip any lesson)

📖 What is JavaScript? (9:47)
❓Quiz 1
📖 Why Do We Need JavaScript? (9:06)
❓Quiz 2
📖 Where JavaScript is Used Today (and What Depends on JS)? (11:14)
❓Quiz 3
📖 History and Versions of JavaScript (5:54)
❓Quiz 4
📖 Where JavaScript Runs?
❓Quiz 5
📖 JavaScript Engines (3:00)
❓Quiz 6
📖 Is JavaScript Compiled or Interpreted Language? (8:14)
❓Quiz 7
📖 How JavaScript Works? (29:14)
❓Quiz 8
📖 Memory Management in JavaScript (26:52)
❓Quiz 9
📖 Pros and Cons of JavaScript (17:16)
❓Quiz 10
📖 ⚠️ JavaScript Weaknesses & Why You Should Not Start Learning Programming with It? (Self-Read)
📖 🚦 Limitations of Node.js (self-Read)
📖 Which is better for a backend C# or Node.js? (Self-Read)

🌐🪟🌳Window, BOM, and DOM in JavaScript

📖 Introduction to Window, BOM, and DOM in JavaScript
❓ Quiz: Introduction to Window, BOM, and DOM in JavaScript

1️⃣ 🪟 Window (The Global Container)

📖 Window (The Global Container) (11:42)
📖 alert() — Displaying Messages to Users 💬 (7:33)
📖 confirm() — Getting User Confirmation ✅❌ (7:18)
📖 prompt() — Asking for User Input 💬 (14:59)
📖 window.open() — Opening New Windows or Tabs 🪟 + window.close (24:38)
📖 🪟 Controlling the Browser Window (focus(), blur(), moveTo(), and resizeTo()) (10:33)
📖 Understanding Browser Window Dimensions & Position (innerWidth, innerHeight, outerWidth, outerHeight, screenX, screenY) (13:20)

⏱️ JavaScript Timing Functions

📖 ⏱️ JavaScript Timing Functions (setTimeout(), clearTimeout(), setInterval(), clearInterval()) (23:15)
🧐 Activity 1
💡 Activity 1 -Solution
🧐 Activity 2 - Digital Tasbeeh Program
💡 Activity 2 -Solution (9:49)

Event Handling – addEventListener() / removeEventListener()

📖 Event Handling – onclick vs addEventListener() (19:48)
❓Quiz 1
📖 Removing Events Using removeEventListener() (10:56)
❓Quiz 2

JavaScript Scrolling Methods

📖 🧭 JavaScript Scrolling Methods — scrollX, scrollY, scrollTo(), scrollBy() (8:05)
❓Quiz

🧭Location Object

📖 The location Object in JavaScript (Navigation & URL Control) (12:45)
❓Quiz

📜 history Object

📖 The history Object in JavaScript (Browser Navigation Control) (9:38)
❓Quiz

🧭 navigator Object

📖 The navigator Object in JavaScript (Browser & Device Information) (13:54)
❓Quiz

🖥️ screen Object

📖 The screen Object in JavaScript (6:41)
📖 Screen vs Window vs Document Sizes (Self Read)
❓Quiz

💾Web Storage in JavaScript

📖💾 Web Storage localStorage & sessionStorage in JavaScript (31:42)
❓Quiz
🧐 Activity 1: Web Storage
💡 Activity 1 -Solution
Example: Auto-Save Text Using Session Storage (8:26)

💾Web Storage - 🍪 Cookies in JavaScript

📖🍪 Cookies in JavaScript (27:25)
❓Quiz
🧐 Activity
💡 Activity - Solution

💾Web Storage - 🗄️ IndexedDB

📖 🗄️ IndexedDB In Javascript (17:37)
❓Quiz
📖 🗄️IndexedDB CRUD Operations & Database Setup in JavaScript (35:17)
❓Quiz 2
📖 🗝️IndexedDB — Creating Indexes & Searching Data (30:23)
❓Quiz 3
📖 🧭 IndexedDB Cursor-Based Searching (Advanced Searching) (27:46)
❓ Quiz 4
📖 🔁 How does the cursor loop? (Self Read)
❓ Quiz 5
📖 Libraries for IndexedDB (Conceptual & Practical Overview)

📘 Coding with Javascript: Basic Syntax Foundations (Self Read)

📖 📜 Statements & Semicolons in JavaScript
📖🔥 Why must return, break, and continue be followed directly by a value?
📖 🔠 Case Sensitivity in JavaScript
📖 📝 Comments in JavaScript (// and /* * /)
📖 Whitespace & formatting rules
📖 Code Blocks { } in Javascript
📖 "use strict" in JavaScript

📗 Variables , Constants, and Scopes

📖 Variables and Constants in JavaScript (19:26)
❓ Quiz 1
📖 JavaScript Scopes & Shadowing (13:55)
🧐 Activity
💡 Activity – Solution
❓Quiz 2
📖 Re-Declaration Rules in JavaScript

📙 Data Types & Type System

📖 Primitive Data Types (30:19)
❓Quiz - Primitive Data Types
🧐 Activity - Primitive Types
💡 Activity – Solution
📖 Reference Types (10:24)
❓Quiz - Reference Types
📖 typeof, instanceof, equality rules (Self Read)
❓Quiz - typeof, instanceof, equality rules
📖 Type Conversion in JavaScript (Implicit & Explicit) (Self Read)
❓Quiz - Type Conversion
🧐 Activity - Type Conversion
💡 Activity – Solution

📕 Operators

📖 Arithmetic & Assignment Operators
🧐 Activity — Arithmetic & Assignment Operators Practice
💡 Activity - Solutions
📖 Comparison Operators & Equality in JavaScript
🧐 Activity — Comparison & Equality Practice
💡 Activity - Solutions
📖 Logical Operators & Short-Circuiting in JavaScript
🧐 Activity — Logical Operators & Short-Circuiting
💡 Activity - Solutions
JavaScript Short-Circuiting Playground
📖 JavaScript String Operators & Template Literals
🧐 Activity: Practice String Operators & Template Literals
💡 Activity - Solutions
📖 Logical Assignment Operators (&&=, ||=, ??=)
🧐 Activity – Logical Assignment Operators
💡 Activity – Solution
📖 || vs ?? (Common Bugs & Correct Usage)
📖 Bitwise Operators (Overview + Use Cases)
🧐 Activity – Bitwise Operators
💡 Activity – Solution

📘 Control Flow

📖 if, else, else if
🧐 Activity - if, else, else if
💡 Activity - Solutions
📖 switch + fallthrough rules
🧐 Activity - switch
💡 Activity Solutions

📕Loops

📖 for Loop
🧐 Activity - for Loop
💡 Activity Solutions
📖 for in, for of Loops
🧐 Activity — for in , for of
💡 Activity Solutions
📖 🏷️ Labeled Loops
📖 while & do…while Loops
🧐 Activity - while, do while loops
💡 Activity - Solutions
📖 Ternary Operator (condition ? valueIfTrue : valueIfFalse)
🧐 Activity - Ternary Operator
💡 Activity - Solutions

📗 Functions

📖 Function Declarations vs Expressions
🧐 Activity - Function Declaration vs Expressions
💡 Activity - Solutions
📖 🏹 Arrow Functions in JavaScript (=>)
🧐 Activity — Arrow Functions
💡 Activity - Solutions
📖 Parameters, Arguments & Default Params
🧐 Activity — Parameters, Arguments & Default Parameters
💡 Activity - Solutions
📖 Return, Scope, and Hoisting in Functions (JavaScript Deep Dive)
🧐 Activity - Return, Scope, and Hoisting in Functions
💡 Activity - Solutions
📖 Closures, Callbacks & First-Class Functions
🧐 Activity - Closures, Callbacks & First-Class Functions
💡 Activity - Solutions
📖 IIFE (Immediately Invoked Function Expressions)
🧐 Activity – Write & Run IIFEs
💡 Activity - Solutions
📖 call(), apply(), bind() (Controlling this)
🧐 Activity – Controlling this
💡 Activity – Solution
📖 Recursion in JavaScript
🧐 Activity – Recursion in JavaScript
💡 Activity – Solution
📖 The arguments Object vs Rest Parameters (...args)
🧐 Activity – arguments vs ...args
💡 Activity – Solution

📙 Objects

📖 Object Literal Syntax & Property Access
🧐 Activity - Objects
💡 Activity - Solutions
📖 Methods, this, and Object Behavior
🧐 Activity: Methods, this, and Object Behavior
💡 Activity - Solutions
📖 Object Utilities (Object.keys, Object.values, Object.entries, Object.fromEntries)
🧐 Activity – Object Utilities
💡 Activity – Solution
📖 hasOwn / hasOwnProperty (Safe Property Checks)
🧐 Activity – Safe Property Checks
💡 Activity – Solution
📖 Shallow vs Deep Copy (Spread Pitfalls + JSON Limits)
🧐 Activity – Shallow vs Deep Copy
💡 Activity – Solution

📗 Arrays

📖 Array Basics, Indexing & Mutating Methods
🧐 Activity - Array Basics, Indexing & Mutating Methods
💡 Activity - Solutions
📖 Slice, Splice & Advanced Array Operations
🧐 Activity - Slice, Splice & Advanced Array Operations
💡 Activity - Solutions
📖 Array Searching & Filtering (find, filter, map, reduce)
🧐 Activity - Array Searching & Filtering
💡 Activity - Solutions
📖 Sorting, Iterating & Higher-Order Array Methods (sort, forEach, some, every)
🧐 Activity - Sorting & Higher-Order Methods
💡 Activity - Solutions
📖 for…in vs for…of vs forEach vs map
🧐 Activity – Choose the Correct Loop
💡 Activity – Solution
📖 ⚠️ Async Pitfall: Why await Doesn’t Work Inside forEach()
🧐 Activity – Fix the Bug
💡 Activity – Solution
📖 Destructuring & Spread (Arrays & Objects)
🧐 Activity - Destructuring & Spread
💡 Activity - Solutions

📕 Maps, Sets & Advanced Data Collections

📖 Why We Need Maps & Sets in JavaScript
📖 Map Basics in JavaScript
🧐 Activity – Map Basics
💡 Activity Solutions
📖 Map Methods & Iteration
🧐 Activity – Map Methods & Iteration
💡 Activity - Solutions
📖 Set Basics in JavaScript
🧐 Activity – Set Basics
💡 Activity - Solutions
📖 Set Methods & Use Cases
🧐 Activity – Set Methods & Use Cases
💡 Activity - Solutions
📖 WeakMap & WeakSet (Concept + Syntax)
🧐 Activity - WeakMap & WeakSet
💡 Activity - Solutions

📗 Strings, Numbers & Built-in Objects

📖 String Syntax, Escape Sequences & Methods
🧐 Activity - String Syntax, Escape Sequences & Methods
💡 Activity - Solutions
📖 Number Syntax, parseInt, parseFloat, & isNaN
🧐 Activity - Number Syntax & Parsing
💡 Activity - Solutions

📘 Math Object (Syntax & Practical Usage)

📖 Introduction to the Math Object (JavaScript)
📖 Rounding & Absolute Values
🧐 Activity - Rounding & Absolute Values
💡 Activity - Solutions
📖 Power, Roots & Exponents
🧐 Activity - Power, Roots & Exponents
💡 Activity - Solutions
📖 Min, Max & Comparisons
🧐 Activity - Min, Max & Comparisons
💡 Activity - Solutions
📖 Random Numbers in JavaScript
🧐 Activity - Random Numbers
💡 Activity - Solutions
📖 Trigonometry & Mathematical Constants (Overview)
🧐 Activity - Trigonometry & Constants
💡 Activity - Solutions

📗 Date Object (Syntax & Practical Usage)

📖 Introduction to the Date Object
📖 Date Creation Methods
🧐 Activity - Date Creation Methods
💡 Activity - Solutions
📖 Getting Date Values
🧐 Activity - Getting Date Values
💡 Activity - Solutions
📖 Setting Date Values
🧐 Activity - Setting Date Values
💡 Activity - Solutions
📖 Timestamps & Date Comparisons
🧐 Activity - Timestamps & Comparisons
💡 Activity - Solutions
📖 Comparing & Sorting Dates
🧐 Activity - Comparing Dates
💡 Activity - Solutions
📖 Adding & Subtracting Time
🧐 Activity - Adding & Subtracting Time
💡 Activity - Solutions
📖 Date Difference (DateDiff)
🧐 Activity - Date Difference (DateDiff)
💡 Activity - Solutions
📖 Start & End of Time Periods
🧐 Activity - Start & End of Time Periods
💡 Activity - Solutions
📖 Date Validation & Edge Cases
🧐 Activity — Date Validation & Edge Cases
💡 Activity - Solutions
📖 Formatting Dates (Basic Syntax)
🧐 Activity - Formatting Dates
💡 Activity - Solutions
📖 Business Date Calculations
🧐 Activity - Business Date Calculations
💡 Activity - Solutions
📖 Native Date vs Libraries (Conceptual Overview)

📙 Advanced and Rare Operators

📖 Advanced JavaScript Operators - Spead, Rest, Ternary, Nullish, and Optional Chaning
🧐 Activity - Advanced JavaScript Operators
💡 Activity - Solutions
📖 Rare but Important JavaScript Operators
🧐 Activity - Rare Operators
💡 Activity - Solutions

📕 JSON (Syntax Level Overview)

📖 What is JSON & Why It Exists
🧐 Activity - JSON
💡 Activity - Solutions
📖 JSON Syntax Rules
🧐 Activity - JSON Rules
💡 Activity - Solutions
📖 JSON.stringify()
🧐 Activity - JSON.stringify()
💡 Activity - Solutions
📖 JSON.parse()
🧐 Activity - JSON.parse()
💡 Activity - Solutions
📖 JSON in Real Applications, Limitations & Best Practices
🧐 Activity - JSON Best Practices
💡 Activity - Solutions

📗Error Handling & Defensive Programming

📖 Understanding Errors, Error Types & try/catch
🧐 Activity - Understanding Errors in Javascript
💡 Activity - Solutions
📖 The Error Object in Depth
📖 Throwing Errors Intentionally
🧐 Activity - Throwing Errors Intentionally
💡 Activity - Solutions
📖 Custom Error Classes
🧐 Activity - Custom Error Classes
💡 Activity - Solutions
📖 Error Handling in Functions - Defensive Function Design
🧐 Activity - Error Handling in Functions
💡 Activity - Solutions
📖 Error Handling with Async Code (Promises & async/await)
📖 Validations vs Errors
🧐 Activity - Validations vs Errors
💡 Activity - Solutions
📖 Global Error Handling
🧐 Activity - Global Error Handling
💡 Activity - Solutions
📖🧪 Debugging & Error Diagnosis (How to Find and Understand Bugs)
📖 Best Practices & Anti-Patterns in JavaScript Error Handling
📖 🌍 Real-World Error Handling Scenarios
📖🧠 Error Handling Mental Model (How Professionals Think About Errors)

📘Classes & Object-Oriented Programming

📖 OOP in JavaScript vs OOP in C# — A Clear Comparison
📖 Why Classes Exist in JavaScript
🧐 Activity- Why Classes Exist
💡 Activity - Solutions
📖 Class Declaration Syntax in JavaScript
🧐 Activity - Class Declaration Syntax
💡 Activity - Solutions
📖 Constructors
🧐 Activity - Constructors
💡 Activity - Solutions
📖 Instance Properties & Methods
🧐 Activity -Instance Properties & Methods
💡 Activity - Solutions
📖 Public Fields & Class Properties
🧐 Activity - Public Fields & Class Properties
💡 Activity - Solutions
📖 Getters & Setters in JavaScript
🧐 Activity - Getters & Setters
💡 Activity - Solutions
📖 Static Properties & Methods
🧐 Activity - Static Properties & Methods
💡 Activity - Solutions
📖 Inheritance with extends
🧐 Activity - Inheritance with extends
💡 Activity - Solutions
📖 The super Keyword
🧐 Activity - super Keyword
💡 Activity - Solutions
📖 Method Overriding
🧐 Activity - Method Overriding
💡 Activity - Solutions
📖 Private Fields & Methods (Modern JavaScript)
🧐 Activity - Private Fields & Methods
💡 Activity - Solutions
📖 Class vs Prototype (Conceptual Understanding)
🧐 Activity - Class vs Prototype
💡 Activity - Solutions
📖 Classes in Real Applications
📖 Common Class Pitfalls, Best Practices & the Classes Mental Model

📘 JavaScript Modules (ES Modules — import / export)

📖 Why JavaScript Modules Exist
🧐 Activity - Why Modules Exist
💡 Activity - Solution
📖 Module Basics
🧐 Activity - Modules Basics
💡 Activity - Solution
📖 Exporting from Modules
🧐 Activity – Exporting from JavaScript Modules
💡 Activity – Solution
📖 Importing Modules
🧐 Activity – Importing JavaScript Modules
💡 Activity – Solution
📖 Module Loading & Resolution
🧐 Activity – Module Loading & Resolution
💡 Activity – Solution
📖 Module Design Best Practices
🧐 Activity – Module Design Best Practices
💡 Activity – Solution
📖 Modules Mental Model
🧐 Activity – Modules Mental Model
💡 Activity – Solution

📗 🔁 Event Loop, Call Stack, Tasks & Microtasks

📖 Call Stack vs Web APIs (Runtime Model)
🧐 Activity – Call Stack vs Web APIs
💡 Activity – Solution
📖 The Event Loop (How JavaScript Schedules Work)
🧐 Activity – Event Loop Prediction
💡 Activity – Solution
📖 Task Queue (setTimeout, DOM Events)
🧐 Activity – Task Queue in Action
💡 Activity – Solution

📙 Promises In Javascript

📖 Why Asynchronous Code Exists and What is Promise?
🧐 Activity – Why Asynchronous Code Exists
💡 Activity – Solution
📖 Promise Basics
🧐 Activity – Promise Basics
💡 Activity – Solution
📖 Consuming Promises
🧐 Activity – Consuming Promises
💡 Activity – Solution
Full working example for Promise
📖 Promise Error Handling
🧐 Activity – Promise Error Handling
💡 Activity – Solution
Full Working Example for Promise Error Handling
📖 Promise Combinators
🧐 Activity – Promise Combinators
💡 Activity – Solution
📖 Promises Mental Model
🧐 Activity – Promises Mental Model
💡 Activity – Solution
📖 Microtask Queue (Promises, queueMicrotask)
🧐 Activity – Microtask Priority
💡 Activity – Solution
📖 Execution Order: setTimeout vs Promise (Common Surprises)
🧐 Activity – Predict the Output
💡 Activity – Solution

📗 async / await

📖 From Promises to async/await
🧐 Activity – From Promises to async/await
💡 Activity – Solution
📖 async Functions
🧐 Activity – async Functions
💡 Activity – Solution
📖 await Keyword
🧐 Activity – await Keyword
💡 Activity – Solution
📖 Error Handling with async/await
🧐 Activity – Error Handling with async/await
💡 Activity – Solution
📖 Common async/await Pitfalls
🧐 Activity – Common async/await Pitfalls
💡 Activity – Solution
📖 async/await Mental Model
🧐 Activity – async/await Mental Model
💡 Activity – Solution

📘 Fetch API & Calling Web APIs in JavaScript

📖 Introduction to Web APIs
🧐 Activity – Introduction to Web APIs
💡 Activity – Solution
📖 HTTP Fundamentals for JavaScript Developers
🧐 Activity – HTTP Fundamentals for JavaScript Developers
💡 Activity – Solution
📖 URL & URLSearchParams-Query Strings Done Right
🧐 Activity – Build a Safe Query String
💡 Activity – Solution
📖 Fetch API Basics
🧐 Activity – Fetch API Basics
💡 Activity – Solution
📖 Handling Fetch Responses
🧐 Activity – Handling Fetch Responses
💡 Activity – Solution
📖 Error Handling with Fetch
🧐 Activity – Error Handling with Fetch
💡 Activity – Solution
📖 Sending Data to APIs
🧐 Activity – Sending Data to APIs
💡 Activity – Solution
📖 Fetch Options & Configuration
🧐 Activity – Fetch Options & Configuration
💡 Activity – Solution
📖 Working with Headers - Authorization, Accept, Content-Type
🧐 Activity – Identify the Missing Header
💡 Activity – Solution
📖 Fetch with async/await
🧐 Activity – Fetch with async/await
💡 Activity – Solution
📖 Working with Real APIs
🧐 Activity – Working with Real APIs
💡 Activity – Solution
📖 Pagination Patterns - page/limit vs cursor
🧐 Activity – Choose the Right Pattern
💡 Activity – Solution
📖 Fetch & CORS (Conceptual Understanding)
🧐 Activity – Fetch & CORS
💡 Activity – Solution
📖 AbortController & Request Cancellation
🧐 Activity – AbortController & Request Cancellation
💡 Activity – Solution
📖 Common Fetch Pitfalls
🧐 Activity – Common Fetch Pitfalls
💡 Activity – Solution
📖 Fetch Best Practices
🧐 Activity – Fetch Best Practices
💡 Activity – Solution
📖 Retry & Backoff Strategy
🧐 Activity – Think Like an Engineer
💡 Activity – Solution
📖 Fetch Mental Model
🧐 Activity – Fetch Mental Model
💡 Activity – Solution

📗 Small Demo Projects: Sample Real API Demos

🧩 Async Data Loader with async / await
🧩 Parallel Fetch Dashboard with Promise.all()
🧩 Timeout Fetch with Promise.race()
🧩 First Success Wins with Promise.any()
🧩 Complete Result Reporting with Promise.allSettled()
🧩 Lesson: Live Search UI with Async Requests, Debounce, and Cancellation
🧩 Students CRUD Demo with fetch + async/await
🧩 Weather App with Public API (Open-Meteo) using fetch + async/await
🧩 Currency Converter with Rate History using fetch + async/await (Frankfurter API)

📘 DOM Manipulation & Events Syntax

📖 DOM Selection (getElementById, querySelector, querySelectorAll)
🧐 Activity – DOM Selection (getElementById, querySelector, querySelectorAll)
💡 Activity – Solution
❓ Quiz 1
📖 DOM Selection: getElementsByClassName() & getElementsByTagName()
🧐 Activity – getElementsByClassName() & getElementsByTagName()
💡 Activity – Solution
❓ Quiz 2
📖 DOMContentLoaded vs load (Avoid Null Selections)
🧐 Activity – DOM Ready Timing
💡 Activity – Solution
📖 DOM Manipulation: Changing Text, HTML, Attributes, CSS
🧐 Activity – DOM Manipulation: Text, HTML, Attributes, CSS
💡 Activity – Solution
❓ Quiz 3
📖 classList API - add() / remove() / toggle() / contains()
🧐 Activity – Class Control
💡 Activity – Solution
📖 Creating, Removing & Appending Elements
🧐 Activity – Creating, Removing & Appending Elements
💡 Activity – Solution
❓ Quiz 4
📖 DOM Traversal & Relationships
🧐 Activity – DOM Traversal Practice
💡 Activity – Solution
📖 matches() & closest() - Explicit & Practical Usage (No Guessing DOM Paths)
🧐 Activity – Practical Click Handling
💡 Activity – Solution
📖 insertAdjacentHTML vs createElement
🧐 Activity – insertAdjacentHTML vs createElement
💡 Activity – Solution
❓ Quiz 5
📖 Event Listeners & the Event Object
🧐 Activity – Event Listeners & Event Object
💡 Activity – Solution
❓ Quiz 6
📖 Event Types Map - input / change / submit / keydown / keyup / focus / blur
🧐 Activity – Choose the Correct Event
💡 Activity – Solution
📖 Debounce vs Throttle - Controlling How Often Your Code Runs
🧐 Activity – Choose the Right Tool
💡 Activity – Solution
📖 Event Delegation (Handling Dynamic Elements Correctly) & Bubbling
🧐 Activity – Event Delegation
💡 Activity – Solution
❓ Quiz 7
📖 dataset API (data-* attributes) for Dynamic UI Actions
🧐 Activity – Using dataset for Actions
💡 Activity – Solution
⚠️ Important!

📗 Form Validation - PreventDefault , Collecting Form Data

📖 Form Handling & Validation (input, submit, preventDefault)
🧐 Activity – Form Handling & Validation
💡 Activity – Solution
❓ Quiz
📖 FormData API (Collecting Form Data Correctly)
🧐 Activity – FormData API (Collecting Form Data Correctly)
💡 Activity – Solution
📖 Constraint Validation API (checkValidity + HTML Rules)
🧐 Activity – Constraint Validation API
💡 Activity – Solution
📖 Sanitization vs Validation (Security Mindset)
🧐 Activity – Sanitization vs Validation
💡 Activity – Solution

📘🔒 Security Basics for Front-End JavaScript

📖 What Is XSS (Cross-Site Scripting) — In Simple Terms
🧐 Activity – Spot the XSS Risk
💡 Activity – Solution
📖 Safe vs Unsafe DOM Updates
🧐 Activity – Safe or Unsafe?
💡 Activity – Solution
📖 Sanitization vs Validation (Reinforcement)
🧐 Activity – Identify the Missing Step
💡 Activity – Solution
📖 Real-World Safe Rendering Patterns
🧐 Activity – Safe Rendering Decision
💡 Activity – Solution

🔤 Regular Expressions - Bonus (Practical Basics)

📖 Regex Basics - Patterns, Flags, test() & match()
🧐 Activity – Your First Regex Practice
💡 Activity – Solution
📖 Replace & Extract - replace(), matchAll() & Capture Groups (Practical & Clear)
🧐 Activity – Practical Extraction
💡 Activity – Solution

🧰 DevTools Essentials - Bonus

📖 DevTools Overview
🧐 Activity – Build the Habit
💡 Activity – Expected Outcome
📖 Console Mastery
🧐 Activity – Console Like a Pro
💡 Activity – Solution
📖 Breakpoints & Stepping
🧐 Activity – Your First Real Debug Session
💡 Activity – Expected Result
📖 Watch, Scope & Call Stack
🧐 Activity – Make Closures Visible
💡 Activity – Expected Outcome
📖 Elements Tab Debugging
🧐 Activity – Visual Debugging Practice
💡 Activity – Expected Outcome
📖 Network Tab Debugging
🧐 Activity – API Debugging Drill
💡 Activity – Expected Outcome
📖 Application Tab
🧐 Activity – Storage Inspection Drill
💡 Activity – Expected Outcome
📖 Performance Tab
🧐 Activity – Your First Performance Investigation
💡 Activity – Expected Outcome

🧩 Extra Porjects - 10 Projects

🗝️ Project's Overview: 10 Bonus Projects. (44:56)
🧩 Certificate Generator with Live Preview, Validation, Signature Upload, and A4 Print (Landscape)
🧩 Task Manager with IndexedDB, Filtering, and Persistent Storage
🧩 Weather App with City Search, Public API, and 7-Day Forecast (Open-Meteo)
🧩 Students CRUD Demo with Fetch, Async/Await, Modal Editing, and Optimistic UI Updates
🧩 Shopping Cart & Checkout with IndexedDB (Persistent Client-Side Storage)
🧩 Restaurant Ordering System (Menu, Cart, and Orders)
🧩 Currency Converter with Live Rates, 30-Day History Chart, and Safe Request Handling (Frankfurter API)
🧩 Age Calculator with Exact Calendar Math, Validation, Next Birthday Countdown, and Modern UI
🧩 DateDiff Utility with Calendar-Accurate Differences, Auto-Swap, Inclusive Counting, and Modern UI
🧩 Subscription Expiration Logic with Status Badges, Grace Period, Threshold Rules, and Real Date Handling (Modern UI)

📦 Reusable Layout Components - Mini-Framework

📦 Project: Reusable Layout Components (Header · Footer · Sidebar) (23:20)

❓Quiz

Complete and Continue

Discussion

7 comments

Lesson Content Locked

Your session expired. Please sign in again to continue.

🔓 Login