📣 Stop learning shells - JavaScript Is Not “Easy” - It’s Powerful, Complex, and Requires Real Foundations.
لمن هذه الدورة؟
هذه الدورة مثالية لـ:
✅ الطلاب الذين تعلموا أساسيات البرمجة في لغات أخرى (C, C++, C#, Python, Java) ويريدون الانتقال إلى تطوير الويب.
✅ المطورين المبتدئين الذين لديهم أساسيات في المنطق البرمجي ويرغبون في إضافة JavaScript لمهاراتهم.
✅ الهواة أو المتحمسين للتكنولوجيا الذين يريدون بناء مواقع وتطبيقات تفاعلية.
✅ أي شخص يخطط لاحقًا لتعلم أُطر عمل حديثة مثل React أو Vue أو Node.js ويحتاج إلى أساس متين في JavaScript أولاً.
⚠️ تنبيه هام قبل الالتحاق بالدورة ⚠️
هذه الدورة ليست للمبتدئين تمامًا في البرمجة.
📌 يجب أن تمتلك معرفة مسبقة بأساسيات البرمجة .
نحن لن نضيّع وقت الدورة في إعادة التأسيس أو شرح مفاهيم البرمجة العامة، بل سننطلق مباشرة إلى JavaScript (ES6+) ومميزاتها وكيفية استخدامها لبناء مواقع وتطبيقات تفاعلية.
إذا لم يكن لديك أساس برمجي مسبق، فهذه الدورة ليست مناسبة لك. يُفضل أن تبدأ أولاً بخارطة الطريق للاساس العام في البرمجة في المنصة ، ثم تعود إلى هنا لتتعلم JavaScript بثقة وفاعلية.
📘 Start Coding with JavaScript: Beginner’s Essentials Guide
JavaScript Is Not “Easy” — It’s Powerful, Complex, and Requires Real Foundations
🗝️ About This Course
Many learners believe JavaScript is the best “first programming language” because it looks easy.
But here is the reality:
👉 JavaScript is easy to start typing… but hard to master correctly.
👉 Without strong foundations, you don’t learn JavaScript — you learn shells.
That’s why many students:
🔹 write code that “works sometimes”
🔹 copy/paste without understanding
🔹 get destroyed later by async bugs, scope confusion, and framework complexity
🔹 quit because the web feels “random”
This course is designed to fix that.
It teaches JavaScript as a real programming language — with deep foundations:
🔹 correct mental models
🔹 correct debugging habits
🔹 correct async understanding
🔹 correct OOP thinking
🔹 correct browser & runtime understanding
📌 JavaScript is not a beginner shortcut.
✅ JavaScript is a professional tool — and this course teaches it professionally.
🔐 What Makes This Course Different?
🔹 Starts with the correct mindset: why JS is not a “quick start” language
🔹 Teaches the environment properly (browser, Node.js, DevTools, Live Server)
🔹 Builds real understanding of Window, BOM, DOM (not magic)
🔹 Covers deep foundations: scopes, types, operators, control flow, functions
🔹 Heavy activity-based learning: 🧐 activities + 💡 solutions + ❓ quizzes
🔹 Teaches error handling and defensive programming like real developers
🔹 Teaches OOP in JavaScript with a clear comparison to C#
🔹 Explains the Event Loop and async scheduling correctly (tasks vs microtasks)
🔹 Promises + async/await taught with pitfalls and real mental models
🔹 Fetch + real Web APIs + CORS + retry/backoff + cancellation
🔹 Ends with real demo projects + 10 large bonus projects + reusable UI components
📖 What You Will Learn
By the end of this course, you will be able to:
🔹 Understand where JavaScript runs (browser vs Node.js) and how engines work
🔹 Write and run JavaScript using 3 professional methods
🔹 Understand Window / BOM / DOM clearly and use them correctly
🔹 Use timing functions, events, and browser APIs without confusion
🔹 Use Web Storage professionally: localStorage, sessionStorage, cookies, IndexedDB
🔹 Master real JavaScript foundations: variables, scope, types, conversion, operators
🔹 Write correct control flow and loops (including common pitfalls)
🔹 Build strong function skills: closures, callbacks, recursion, bind/call/apply
🔹 Master objects, arrays, Map/Set, built-in objects, Math, Date, JSON
🔹 Handle errors professionally (sync + async) with real defensive programming
🔹 Apply OOP in JavaScript and understand how it differs from C#
🔹 Use ES Modules (import/export) and design modular code
🔹 Understand the Event Loop, Call Stack, Web APIs, tasks, microtasks
🔹 Master Promises + async/await without the classic mistakes
🔹 Call Web APIs using Fetch with best practices, headers, pagination, cancellation
🔹 Manipulate the DOM safely and build interactive UI with correct event patterns
🔹 Validate forms correctly and understand security basics (XSS mindset)
🧱 How This Course Is Structured?
This course follows a progressive “real foundations” path:
1️⃣ Setup & running JavaScript (browser + Node.js + DevTools)
2️⃣ Understanding JavaScript itself (history, engines, memory, pros/cons, limits)
3️⃣ Browser fundamentals (Window / BOM / DOM)
4️⃣ Real web programming tools: timing, events, scrolling, location/history/navigator/screen
5️⃣ Storage foundations: localStorage/sessionStorage, cookies, IndexedDB + CRUD + indexes + cursors
6️⃣ JavaScript syntax foundations (self-read + guided structure)
7️⃣ Core language mastery: variables, scopes, types, operators, control flow, loops
8️⃣ Functions deeply (closures, this, recursion, rest/args, IIFE)
9️⃣ Objects + arrays + collections (Map/Set/WeakMap/WeakSet)
🔟 Built-in mastery: strings, numbers, Math, Date (with real utilities like DateDiff)
1️⃣1️⃣ JSON as a real tool (rules + stringify/parse + best practices)
1️⃣2️⃣ Error handling & defensive programming (real-world mindset)
1️⃣3️⃣ OOP in JavaScript (with C# comparison)
1️⃣4️⃣ Modules (ES Modules) + best practices
1️⃣5️⃣ Async mastery: Event Loop + Promises + async/await + pitfalls
1️⃣6️⃣ Fetch + calling real Web APIs + CORS + retries + cancellation
1️⃣7️⃣ DOM manipulation + events + delegation + debounce/throttle
1️⃣8️⃣ Form handling + validation + security basics
1️⃣9️⃣ Bonus: Regex + DevTools Essentials
2️⃣0️⃣ Real demo projects + 10 big bonus projects + reusable layout components
Each lesson includes (where applicable):
🔹 Clear explanation
🔹 🧐 Practical activity
🔹 💡 Activity solution
🔹 ❓ Quiz
🔹 Summary and best practices
🧑💻 Who This Course Is For?
✅ Learners who already have programming foundations and want to enter web seriously
✅ Backend developers moving toward web integration and frontend readiness
✅ Students who want JavaScript done correctly (not copy/paste learning)
✅ Developers who want strong async understanding and fewer “random bugs”
✅ Learners planning to move into frameworks later (React / Angular / Vue / Node.js)
❌ Not for absolute beginners who think JavaScript is an “easy shortcut”
❌ Not for anyone who wants only quick DOM tricks without foundations
⚠️ What This Course Is NOT?
❌ Not a “learn JavaScript in 2 hours” course
❌ Not a copy/paste tutorial series
❌ Not a framework course (React / Angular / Vue)
❌ Not a shortcuts course for people who avoid foundations
📌 This course is about learning JavaScript like a professional developer.
🎓 Certification & Learning Outcomes
🏅 Professional Certificate of Completion
Upon successful completion of this course, the learner will earn a
Certificate in JavaScript: Beginner’s Essentials Guide, verifying the ability to:
🔹 Write correct JavaScript with strong foundations (scope, types, functions, objects)
🔹 Build interactive web behavior using DOM and events correctly
🔹 Handle browser storage (localStorage, cookies, IndexedDB) professionally
🔹 Apply defensive programming and strong error handling (sync + async)
🔹 Understand and use async programming correctly (event loop, promises, async/await)
🔹 Call real Web APIs with Fetch using best practices and safe patterns
🔹 Build real mini-projects and reusable components with correct structure
🔐 This certification confirms real JavaScript readiness, not surface-level syntax.
🎓 Final Outcome
After completing this course, you will not just “write JavaScript”.
You will be able to:
🔹 Understand what your code is doing under the hood
🔹 Debug JavaScript like a real developer (not guessing)
🔹 Avoid classic async mistakes that destroy real apps
🔹 Build interactive UI correctly with safe DOM patterns
🔹 Move into frameworks with confidence because the foundations are solid
🧠 JavaScript is powerful — and with the right foundations, it becomes your strongest tool.
Course Content
- 📥 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 🖧)
- 📖 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 (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)
- 📖 🗄️ 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)
- 📖 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
- 📖 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
- 📖 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
- 📖 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
- 📖 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
- 📖 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
- 📖 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
- 📖 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
- 📖 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)
- 📖 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
- 📖 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)
- 📖 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
- 📖 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
- 📖 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
- 📖 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
- 📖 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
- 🧩 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 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 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
- 📖 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
- 📖 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
- 🗝️ 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)